Как скрыть содержимое, когда флажок установлен, и показать, когда флажок снят?

Question 1

У меня есть расширение chrome для блокировки ленты новостей на главной странице в социальных сетях. Я хочу, чтобы в моей будущей версии появилась новая функция, в которой пользователи смогут включать или выключать ленту отдельных сайтов в меню настроек. Я построил settings.html и еще один background.js файл. Settings.html это будет страница настроек, на которой пользователи могут включать или выключать каналы с помощью флажков.

Что я хочу, чтобы код выполнял: я хочу, чтобы лента новостей на домашней странице скрывалась, если пользователь установит флажок, в противном случае я хочу, чтобы лента отображалась.

Я подозреваю, что код не работает, потому что мне нужно внести некоторые изменения в файл manifest.json.

В файле манифеста есть следующее (я удалил личные данные с помощью "//"

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

В приведенном ниже коде класс "jiji" предназначен для моего элемента ввода (флажок) в settings.html файл. Класс "tn0ko95a" предназначен для класса, который скрывает ленту новостей главной страницы на веб-сайте социальных сетей. Это не мой собственный класс, я получил это, выполнив "элемент проверки" на веб-сайте социальных сетей.

Этот код работает:

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

Но когда я добавляю больше в этот код, он не работает:

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

Так почему же последний код не работает?

Question 2

Попробуйте изменить вместо щелчка

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

Или вы можете использовать мышь, чтобы посмотреть этот пример Установите флажок jQuery и нажмите событие

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

0

Попробуйте изменить вместо щелчка

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

Или вы можете использовать мышь, чтобы посмотреть этот пример Установите флажок jQuery и нажмите событие

Wamiq Rehman

2021-11-18 19:51:06

Спасибо. Как насчет элемента ввода HTML? Вы что-нибудь посоветуете мне поменять там? Я слышал, что нам не нужно добавлять onchange или onclick = ... при использовании jquery. Это правда?

abc_13

<тип ввода="флажок" класс = "jiji" идентификатор="fbbox" /><тип ввода="флажок" класс = "jiji" идентификатор="fbbox" />

Wamiq Rehman

Мы не добавляем какое-либо событие onchange во входные данные, данный ответ обрабатывается исключительно jquery

Wamiq Rehman

Эй! Ответ не сработал. Я подозреваю, что мне нужно внести некоторые изменения в манифест. Может быть, мне нужно использовать какой-нибудь chrome API, чтобы это сработало.

abc_13

Вопрос, какой элемент в вашем коде(или любой другой элемент не из вашего кода) вы хотите скрыть

Wamiq Rehman

Ну, класс предназначен для элемента div с другими элементами внутри него. Это, по сути, скрывает новостную ленту на главной странице сайта в социальных сетях.

abc_13

Как скрыть содержимое, когда флажок установлен, и показать, когда флажок снят?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории