Cómo ocultar el contenido cuando la casilla de verificación está marcada y mostrar cuando la casilla de verificación está desactivada?

0

Pregunta

Tengo un medio de comunicación social página de inicio de suministro de noticias bloqueador de extensión de chrome. Quiero implementar una nueva característica en mi próxima versión donde los usuarios pueden activar la alimentación de los sitios individuales o desactivar en el menú de configuración. He construido una settings.html y un background.js archivo. Settings.html será la configuración de la página donde los usuarios pueden activar las fuentes o desactivar las casillas de verificación.

Lo que yo quiero el código para hacer: quiero que la página de inicio de suministro de noticias para ocultar si el usuario se comprueba en el cuadro, de lo contrario, quiero que el feed para mostrar.

Sospecho que el código no está funcionando porque tengo que hacer algunos cambios en mi manifiesto.archivo json.

El archivo de manifiesto tiene la siguiente (he quitado cosas privadas 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": "//"
    }
}

El 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>

En el código de abajo, la clase "jiji" es para mi el elemento de entrada (la casilla) en el settings.html archivo. La clase "tn0ko95a" es para la clase que esconde la página de inicio de suministro de noticias en un sitio web de redes sociales. Este no es mi propia clase, llegué a esto de hacer 'inspeccionar elemento' en el sitio web de redes sociales.

Este código funciona:

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

Pero cuando puedo añadir más a este código, no funciona:

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

Entonces, ¿por qué es el último código no funciona?

1

Mejor respuesta

0

Trate de cambiar en lugar de hacer clic

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

O usted puede utilizar el ratón hacia abajo ver en este ejemplo jQuery casilla de verificación cambiar y haga clic en evento

2021-11-18 19:51:06

Gracias. Lo que sobre el elemento HTML input? Cualquier cosa que usted me recomienda que cambiar no? He oído que no necesitamos agregar onchange o onclick = ... si usando jquery. Es eso cierto?
abc_13

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

No estamos de añadir ningún evento onchange en la entrada de la respuesta dada es puramente manejado por jquery
Wamiq Rehman

Hey! La respuesta no trabajo. Sospecho que tengo que hacer algunos cambios en el manifiesto. Tal vez necesito para utilizar algunos de chrome API para hacer este trabajo.
abc_13

Una pregunta, cual elemento en el código(o cualquier otro elemento no a partir de su código) que se desea ocultar
Wamiq Rehman

Así, la clase es un elemento div con otros elementos dentro de ella. Esencialmente, se esconde la página de inicio de suministro de noticias en un sitio web de redes sociales.
abc_13

En otros idiomas

Esta página está en otros idiomas

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