Как можно запустить JavaScript, чтобы добавить класс в div, а также сделать его активируемым в зависимости от того, добавлен ли другой класс

Question

Я думаю, что схожу с ума.

У меня есть два скрипта, каждый из которых работает независимо друг от друга, однако я не могу заставить их работать комбинированным образом.

Скрипт 1:

• Делает кнопку проверенной и неконтролируемой путем добавления класса

• Также дает элементам div, которые контролируют кнопки, класс для изменения их непрозрачности

Скрипт 2:

• Проверяет, есть ли у тех же самых divов определенный класс (отличный от класса непрозрачности), и, если это так, показывает новый div ниже, таким образом, изменяя содержимое страницы.

Я борюсь за то, чтобы объединить их так, чтобы в сценарии 1 был добавлен класс, который ищет сценарий 2, чтобы можно было нажимать только на определенные элементы div. Проблема в том, что я могу получить все div-ы кликабельными все время, ни разу, или только после того, как будет нажата кнопка «показать все», которая применила фильтр Script 2 ко всем div-элементам.

Классы:

• .checked = стиль кнопок, добавляет рамку и изменяет цвет фона

• .tchecked = стиль Div , изменяет прозрачность на 0,4.

• .filt = Класс, который ищет сценарий 2

• .i c -show = класс, применяемый к содержимому, которое будет отображаться после щелчка элемента div.

Сценарий 1

  var targets = $('.filter'),
  buttons = $('.button');

  buttons.click(function(){
      var value = $(this).data('filter');
      if(value == "all") //If show all then check the show all button, remove the opacity filter to all divs, add the filt class to allow showing of the filtered div.
      {
          buttons.removeClass('checked');
          targets.removeClass('tchecked');
          targets.addClass('filt');

      }
      else
      {
          if($(this).hasClass('checked')) //if the filter button is checked, uncheck it.
          {
              $(this).removeClass('checked');
              var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');});
              if(checkedClasses.length == 0)
              {
                  buttons.removeClass('checked');
                  targets.removeClass('tchecked');
                  targets.addClass('filt');
              }
              else
              {
                  checkedClasses = $.grep(checkedClasses, function(n, i){ return n != value }),
                  selector = '.' + checkedClasses.join('.'),
                  show = targets.filter(selector);
                  targets.not(show).addClass('tchecked').removeClass('filt');
                  show.removeClass('tchecked');
                  targets.addClass('filt');
              }

          }
          else
          {
              $(this).addClass('checked');
              var checkedClasses = buttons.filter('.checked').toArray().map(function(btn){return $(btn).data('filter');}),
              selector = '.' + checkedClasses.join('.'),
              show = targets.filter(selector);
              targets.not(show).addClass('tchecked').removeClass('filt');
              show.removeClass('tchecked');
          }
      }

  });
});

Сценарий 2

$(document).ready(function() {
var value
if()

    $('.filt').click(function() {
    $('#content div').removeClass('ic-show');
      var target = '#' + $(this).data('target');
      $(target).addClass('ic-show');
  })

});

HTML (сжато)

    <button class="button" type="button" data-filter="all"></button>
    <p>Show All</p>
  </div>
  <div class="filter-button">
    <button class="button" type="button" data-filter="apartment"></button>
    <p>Apartments</p>
    <button class="button" type="button" data-filter="house"></button>
    <p>Houses</p>
  </div>
  <div class="filter-button">
    <p>Bedrooms</p>
    <button class="button" type="button" data-filter="1"></button>
    <p>1</p>
    <button class="button" type="button" data-filter="2"></button>
    <p>2</p>
    <button class="button" type="button" data-filter="3"></button>
    <p>3+</p>
  </div>
  <div class="filter-button">
    <button class="button" type="button" data-filter="available"></button>
    <p>Show Available</p>
  </div>
  </div>
</div>
<div class="plots-container">
  <div class="plot filter filt apartment 1 2 3 available" data-target="the_courts">
  <div class="plot filter filt house 3" data-target="AQ">
  <div class="plot filter filt house 2 3" data-target="mews">
  <div class="plot filter filt house 2 3 available" data-target="main">
  <div class="plot filter filt house 2" data-target="hut">
  <div class="plot filter filt apartment 1 2 3" data-target="the_courts">
  <div class="plot filter filt house 3" data-target="AQ">
  <div class="plot filter filt house 2 3 available" data-target="mews">
  <div class="plot filter filt house 2 3" data-target="main">
  <div class="plot filter filt house 2" data-target="hut">
</div>
<div class="content-container"id="content">
  <div class="info-container" id="the_courts">
  <div class="info-container" id="AQ">
  <div class="info-container" id="mews">
  <div class="info-container" id="main">
  <div class="info-container" id="hut">
</div>

В настоящее время они представляют собой отдельные файлы, поэтому все div-ы доступны для клика. Когда я пытаюсь скопировать Сценарий 2 в Сценарий 1, вот где я изо всех сил и в итоге ломаю функциональность.

Любая помощь, как всегда, ценится.