Cum de a ascunde conținutul atunci când caseta de selectare este bifată și arată când caseta de selectare este bifată?

0

Problema

Am un social media pagina de start newsfeed blocker extensia chrome. Vreau să se rostogolească o caracteristică nouă în versiunea viitoare în cazul în care utilizatorii pot transforma hrana de site-uri individuale on sau off în meniul de setări. Am construit o settings.html și o background.js fișierul. Settings.html va fi pagina de setări în cazul în care utilizatorii pot transforma feed-uri de pe sau off cu casetele.

Ceea ce vreau codul pentru a face: vreau ca pagina de start newsfeed pentru a ascunde dacă utilizatorul verifică pe cutie, altfel, vreau alimentare pentru a arăta.

Bănuiesc că acest cod nu este de lucru pentru că am nevoie pentru a face unele modificări pentru a-mi manifesta.fișier json.

Fișierul manifest are următoarele (am scos privat chestia cu "//"

{
    "manifest_version": 2,
    "name": "//",
    "version": "//",
    "description": "//",
    "author": "//",

    "icons": {
        "128": "//"
    },

    "content_scripts": [{
        "html": ["settings.html"],
        "js": ["jquery-3.6.0.min.js", "background.js"],
        "css": ["tiktok.css", "linkedin.css", "youtube.css", "insta.css", "facebook.css", "twitter.css", "reddit.css", "settings.css"],
        "matches": ["https://www.tiktok.com/*", "https://www.linkedin.com/*", "https://www.youtube.com/*", "https://www.instagram.com/*", "https://www.facebook.com/*", "https://twitter.com/*", "https://www.reddit.com/"]
    }],
    
    "background":
    {
        "scripts": ["jquery-3.6.0.min.js", "background.js"]
    },

    "browser_action": {
        "default_title": "//",
        "default_popup": "//"
    }
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = ”UTF-8”>
        <script src="jquery-3.6.0.min.js"></script>
        <script src = "background.js"></script>
        <title>Settings</title>
    </head>
    <body class="settings">
        <h1 class = "classa">Settings</h1>
        <h2>Feed Blocking Preferences</h2>
        <h4>Checkboxes to turn all or individual feeds on or off.</h4>
        <input type="checkbox" class = "jiji" id="fbbox">//</input>
    </body>
</html>

În codul de mai jos, clasa "jiji" este pentru element de intrare (caseta) în settings.html fișierul. Clasa "tn0ko95a" este pentru clasa care ascunde pagina de start newsfeed pe un site de social media. Asta nu e clasa mea, am primit asta de la a face 'inspect element de pe site de social media.

Acest cod funcționează:

$(function () {
 $(".tn0ko95a").hide();
});

Dar când am adăuga mai mult la acest cod, nu merge:

$(function () {
  $(".jiji").click(function () {
    if ($(this).is(":checked")) {
      $(".tn0ko95a").hide();
    } else {
      $(".tn0ko95a").show();
    }
  });
});

Deci, de ce este ultimul cod nu funcționează?

1

Cel mai bun răspuns

0

Încercați să modificați în loc de click

$(function () {
  $(".jiji").change(function () {
    if ($(this).is(":checked")) {
      $(".tn0ko95a").hide();
    } else {
      $(".tn0ko95a").show();
    }
  });
});

Sau puteți folosi mouse-ul în jos vezi acest exemplu jQuery checkbox modificați și faceți clic pe eveniment

2021-11-18 19:51:06

Multumesc. Ce despre HTML element de intrare? Orice ai recomanda sa schimbi acolo? Am auzit că nu avem nevoie pentru a adăuga onchange sau onclick = ... dacă folosind jquery. Este adevărat?
abc_13

<input type="checkbox" class = "jiji" id="fbbox" />
Wamiq Rehman

Nu suntem adăugarea de orice eveniment onchange input-răspunsul dat este pur manipulate de jquery
Wamiq Rehman

Hei! Răspunsul nu a mers. Bănuiesc că am nevoie pentru a face unele modificări la manifest. Poate am nevoie pentru a utiliza unele chrome API pentru a face acest lucru.
abc_13

O întrebare care element în cod(sau orice alt element de cod) pe care doriți să se ascundă
Wamiq Rehman

Ei bine, clasa este un element div cu alte elemente în interiorul acestuia. În esență, acesta ascunde pagina de start newsfeed pe un site de social media.
abc_13

În alte limbi

Această pagină este în alte limbi

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................