Onay kutusu işaretlendiğinde içerik nasıl gizlenir ve onay kutusu işaretlenmediğinde nasıl gösterilir?

Question 1

Bir sosyal medya ana sayfası haber akışı engelleyici chrome uzantısına sahibim. Yaklaşan sürümümde, kullanıcıların ayarlar menüsünde tek tek sitelerin akışını açıp kapatabilecekleri yeni bir özellik sunmak istiyorum. Bir ayar oluşturdum.html ve arka plan.js dosyası. Ayarlar.html, kullanıcıların beslemeleri onay kutularıyla açıp kapatabilecekleri ayarlar sayfası olacaktır.

Yapmak için bu kodu istediğim şey: Ana Sayfa, kutuda bir kullanıcı denetler, aksi takdirde, yem göstermek istiyorum saklayacak bir haber istiyorum.

Kodun çalışmadığından şüpheleniyorum çünkü bildirimimde bazı değişiklikler yapmam gerekiyor.json dosyası.

Bildirim dosyası aşağıdakilere sahiptir ("//"ile özel şeyleri kaldırdım

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

Aşağıdaki kodda, "jiji" sınıfı ayarlardaki giriş öğem (onay kutusu) içindir.html dosyası. "Tn0ko95a" sınıfı, bir sosyal medya web sitesinde ana sayfa haber akışını gizleyen sınıf içindir. Bu benim kendi sınıfım değil, bunu sosyal medya web sitesinde 'ınspect element' yapmaktan aldım.

Bu kod çalışır:

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

Ancak bu koda daha fazlasını eklediğimde işe yaramıyor:

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

Peki neden son kod çalışmıyor?

Question 2

Tıklama yerine değiştirmeyi deneyin

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

Veya fareyi aşağı doğru kullanabilirsiniz bu örneğe bakın jQuery onay kutusunu değiştir ve olayı tıkla

Wamiq Rehman · Answer 1 · 2021-11-18T19:51:06

0

Tıklama yerine değiştirmeyi deneyin

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

Veya fareyi aşağı doğru kullanabilirsiniz bu örneğe bakın jQuery onay kutusunu değiştir ve olayı tıkla

Wamiq Rehman

2021-11-18 19:51:06

Teşekkürler. HTML giriş öğesi ne olacak? Değiştirmemi önerdiğin bir şey var mı? Onchange veya onclick = eklememize gerek olmadığını duydum ... jquery kullanıyorsanız. Bu doğru mu?

abc_13

Wamiq Rehman

Girişte herhangi bir onchange olayı eklemiyoruz verilen cevap tamamen jquery tarafından ele alınmaktadır

Wamiq Rehman

Hey! Cevap işe yaramadı. Manifestoda bazı değişiklikler yapmam gerektiğinden şüpheleniyorum. Belki bunun çalışması için bazı chrome API'leri kullanmam gerekir.

abc_13

Kodunuzdaki hangi öğeyi (veya kodunuzdan olmayan başka bir öğeyi) gizlemek istediğiniz sorusu

Wamiq Rehman

Sınıf, içinde başka öğeler bulunan bir div öğesi içindir. Esasen bir sosyal medya web sitesinde ana sayfa haber akışını gizler.

abc_13

Onay kutusu işaretlendiğinde içerik nasıl gizlenir ve onay kutusu işaretlenmediğinde nasıl gösterilir?

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride