Как использовать метод переключения jQuery динамически? - PullRequest
Новая
       5

Как использовать метод переключения jQuery динамически?

0 голосов
/ 11 октября 2019

В моем проекте так много jQuery toggle, необходимых для изменения текста и значков. Теперь я делаю это, используя: 

$("#id1").click(function () {
  //Code to toggle display and change icon and text
});

$("#id2").click(function () {
  //Same Code to toggle display and change icon and text as above except change in id
});

Проблема в том, что у меня так много переключателей, код довольно длинный, но все, что я изменяю для каждого, - это идентификатор. Поэтому мне было интересно, есть ли способ сделать это просто.

Ниже приведен пример картинки. Я получил еще много на одной странице.

Checkboxes

Ответы [ 4 ]

1 голос
/ 11 октября 2019

Здесь есть две проблемы.

  1. Как выполнить одно и то же действие для нескольких элементов
  2. Как узнать, на каком элементе вы щелкнули, чтобы вы могли запустить соответствующее действие на него. (большинство существующих ответов пропускают эту часть).

Первый - использовать класс для каждого элемента, который вы хотите щелкнуть, вместо того, чтобы соединяться через идентификатор. Вы можете использовать селектор, подобный [id^=id], но использовать класс просто. 

<div id="id1" class="toggler">...

, который позволяет: 

$(".toggler").click(function() ...

во-вторых, он ассоциирует кликабельный сэлемент, который вы хотите переключить. Есть много способов сделать это, я предпочитаю ассоциировать их с data- атрибутами, например: 

<div class="togger" data-toggle="#toggle1">...

, что позволяет вам: 

$(".toggler").click(function() {
    $($(this).data("toggle")).toggle();
});

Ключ здесьчто this является элементом, по которому щелкают, поэтому вы можете сделать что-нибудь еще с this, например, показать / скрыть значок внутри или изменить цвет.

Пример: 

$(".toggler").click(function() {
  $($(this).data("toggle")).toggle();
  $(this).toggleClass("toggled");
});
.toggler { cursor: pointer }
.toggled { background-color: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggler" data-toggle="#t1">T1</div>
<div class="toggler" data-toggle="#t2">T2</div>
<div class="toggler" data-toggle="#t3">T3</div>

<hr/>

<div id="t1" style='display:none;'>T1 content</div>
<div id="t2" style='display:none;'>T2 content</div>
<div id="t3" style='display:none;'>T3 content</div>
1 голос
/ 11 октября 2019

О, вы можете использовать class вместо id? 

<ul>
  <li class="idx">A</li>
  <li class="idx">B</li>
  <li class="idx">C</li>
</ul>

$(".idx").click(function(e){
   //Code to toggle display and change icon and text
  let target = e.target;
  //You can do all what you want just base on the `target`;
});
0 голосов
/ 11 октября 2019

Вы можете попробовать следующий код. 

var num = $("#myList").find("li").length;
  console.log(num)
for(i=0;i<num;i++){
$("#id"+ i).click(function(e){
  let target = e.target;
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="myList">
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
</ul>
0 голосов
/ 11 октября 2019

Вы можете хранить запросы в массиве и выполнять их итерацию для выполнения одинаковых операций JQuery для всех из них 

let ids = ["#id1", "#id2", "#id3", "#randomID"]

ids.forEach((id) => {
  console.log($(id).html())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
  <li id="randomID">D</li>
</ul>

Или (если как ваш пример) и все идентификаторы на самом деле id1, id2, id3, ... и т. Д. 

let id = "id";
let n = 3; //amount of id's

for (let i = 1; i <= n; i++) {
  console.log($("#" + id + i).html())
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
</ul>
...