Блог

Главная - Вопросы по программированию - Динамически добавлять CSS в неродственный div с помощью JavaScript / jQuery?

Динамически добавлять CSS в неродственный div с помощью JavaScript / jQuery?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть этот код, я хочу добавить display свойство в div при запуске test() функции. Я вызываю функцию много раз в одном и том же файле и хочу, чтобы она работала для каждой кнопки по отдельности.

На данный момент, если я нажимаю на любую кнопку, она добавляет CSS в первый inline-data div, а не в тот, на который я нажал. Что мне нужно изменить, чтобы это работало для inline-data того, что совпадает с кнопкой?

 <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

  <style>
    .inline-data {
      display: none;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
  </table>

  <script>
    function test() {
      document.querySelector(".inline-data").style.display = "flex";
    }
    
  </script>
</body>
</html>

Комментарии:

1. в jquery вы можете динамически добавлять css вот так $(".inline-data").css('display', 'flex'); .

2. Итак, вы хотите, чтобы каждая кнопка добавляла гибкость к своему отдельному inline-data элементу?

3. Если вам нужно отменить это, было бы проще переключить класс вместо этого и использовать правила css в этом классе

4. @AndrewL64 Да, вы правы. Но как я могу это сделать без добавления каких-либо дополнительных классов?

5. Вы можете использовать jquery?

Ответ №1:

Чтобы сделать это в test() функции, вам нужно было бы указать, какая кнопка нажата, и сделать что-то подобное приведенному ниже.

Вместо этого вы можете объединить все в одной функции — удалите onClick из каждой кнопки, и эта функция будет срабатывать при всех нажатиях кнопки:

 $( "button" ).click(function() {
  $(this).closest("tr").find("div.inline-data").css("display", "flex");
});

Это позволяет найти tr предка кнопки, на которую было нажато, а затем искать дочерние / внучатые элементы с помощью inline-data . Когда он находит их, он добавляет ваш CSS.

Примечание — если вы не хотите, чтобы это работало для некоторых кнопок, вы можете присвоить этим кнопкам класс, а затем выбрать этот класс в селекторе, например $( "button.myclass" ).click(...

Рабочий фрагмент

 $( "button" ).click(function() {
      $(this).closest("tr").find("div.inline-data").css("display", "flex");
});  
 .inline-data {
      display: none;
    }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
  </table>

Рабочий фрагмент с функцией test()

Если вам это нужно для работы с существующим HTML и test функцией, вы можете сделать это следующим образом:

 function test(clicked_button) {
      $(clicked_button).closest("tr").find("div.inline-data").css("display", "flex");
    }  
 .inline-data {
      display: none;
    }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
  </table>