Come nascondere il contenuto quando questa casella è selezionata quando è spuntata?

0

Domanda

Ho un social media homepage newsfeed blocker estensione di google chrome. Voglio il roll-out di una nuova funzionalità nella mia prossima versione in cui gli utenti possono attivare l'alimentazione dei singoli siti on o su off nelle impostazioni di menu. Io ho costruito un settings.html e un background.js file. Settings.html saranno le impostazioni di pagina in cui gli utenti possono attivare i feed on o off con caselle di controllo.

Quello che voglio il codice per fare: voglio la home page newsfeed per nascondere se l'utente controlla sulla scatola, in caso contrario, voglio il feed alla mostra.

Ho il sospetto che il codice non funziona, perché ho bisogno di fare alcune modifiche al mio manifesto.file json.

Il file manifest è il seguente (ho tolto cose private con "//"

{
    "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>

Nel codice riportato di seguito, la classe "jiji" è per il mio elemento di input (casella di controllo) in settings.html file. La classe "tn0ko95a" per la classe che nasconde la homepage news su un sito web social media. Questa non è la mia classe, ho avuto questo da fare "ispeziona elemento" sul sito web social media.

Questo codice funziona:

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

Ma quando si aggiungono più di questo codice non funziona:

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

Allora, perché è l'ultimo codice non funziona?

1

Migliore risposta

0

Provare a cambiare, invece di fare clic su

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

Oppure si può utilizzare il mouse verso il basso, vedi questo esempio jQuery casella di modifica e fare clic su evento

2021-11-18 19:51:06

Grazie. Che cosa circa il HTML elemento di input? Qualsiasi cosa mi consiglia di cambiare c'è? Ho sentito dire che non abbiamo bisogno di aggiungere onchange o onclick = ... se utilizzando jquery. È vero?
abc_13

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

Non siamo l'aggiunta di qualsiasi evento onchange in ingresso la risposta data è puramente gestito da jquery
Wamiq Rehman

Ehi! La risposta non ha funzionato. Ho il sospetto che ho bisogno di fare alcune modifiche al manifesto. Forse ho bisogno di utilizzare alcuni chrome API per fare questo lavoro.
abc_13

Una domanda per la quale elemento nel codice(o di qualsiasi altro elemento non da codice) che si desidera nascondere
Wamiq Rehman

Beh, la classe è un elemento div con altri elementi all'interno di esso. Essenzialmente si nasconde la homepage news su un sito web social media.
abc_13

In altre lingue

Questa pagina è in altre lingue

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