Как получить имя детали селектора? - PullRequest
Новая
       6

Как получить имя детали селектора?

0 голосов
/ 26 февраля 2020 
<div id="reply1"></div>
<div id="reply5"></div>
<div id="reply20"></div>
<div id="reply26"></div>
<div id="reply52"></div>
<div id="reply61"></div>

<div id="button1"></div>
<div id="button5"></div>
<div id="button20"></div>
<div id="button26"></div>
<div id="button52"></div>
<div id="button61"></div>

То, что я хочу сделать, это: нажмите кнопку 1, переключить div1; нажмите кнопку 52, чтобы переключить div52. 

  $('#button1').click( function(){
         $('#reply_div1').toggle();
    });
  $('#button52').click( function(){
         $('#reply_div52').toggle();
    });

Как передать число в селектор div? Я использую l oop сейчас. Есть ли простой способ? Спасибо.

Ответы [ 4 ]

1 голос
/ 26 февраля 2020

Я внес некоторые изменения в ваш код. надеюсь, это поможет. 

$(document).ready(function() {

  $('button.my_button').click( function(){
         const idName = '#reply' + this.id.replace('button', '');
         console.log(idName);
         $(idName).toggle();
    });
});
div {
padding: 5px;
margin: 5px 0;
background-color: red;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reply1">reply1</div>
<div id="reply5">reply5</div>
<div id="reply20">reply20</div>
<div id="reply26">reply26</div>
<div id="reply52">reply52</div>
<div id="reply61">reply161</div>

<button class="my_button" id="button1">Button 1</button>
<button class="my_button" id="button5">Button 5</button>
<button class="my_button" id="button20">Button 20</button>
<button class="my_button" id="button26">Button 26</button>
<button class="my_button" id="button52">Button 52</button>
<button class="my_button" id="button61">Button 61</button>
0 голосов
/ 26 февраля 2020

Вы можете создать массив и l oop через него.
jQuery селектор - это просто строка, вы можете объединить его, как показано ниже: 

var numbers= ["1", "5", "20", "26", "52", "61"];

for (i = 0; i < numbers.length; i++) 
{
    $('#button' + numbers[i]).click( function(){
         $('#reply_div' + numbers[i]).toggle();
    });
}
0 голосов
/ 26 февраля 2020

Добавьте общий класс и атрибут data-target к кнопке, и мы можем написать для этого одну функцию. 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $('.button').click( function(){
         var target = $(this).attr('data-target');
         $('#' + target).toggle();
    });
});
</script>
</head>
<body>

<div id="reply1">r1</div>
<div id="reply5">r2</div>
<div id="reply20">r3</div>
<div id="reply26">r4</div>
<div id="reply52">r5</div>
<div id="reply61">r6</div>

<div id="button1" class="button" data-target= "reply1">b1</div>
<div id="button5" class="button" data-target= "reply5">b2</div>
<div id="button20" class="button" data-target= "reply20">b3</div>
<div id="button26" class="button" data-target= "reply26">b4</div>
<div id="button52" class="button" data-target= "repl52">b5</div>
<div id="button61" class="button" data-target= "reply61">b6</div>

</body>
</html>
0 голосов
/ 26 февраля 2020

Если все ваши элементы имеют одинаковое начало атрибута id, то вы можете использовать селектор атрибута с begin-with ^= компаратором.
Тогда вам просто нужно заменить button часть этого id на reply, чтобы получить id соответствующего " ответа ". 

// a single delegated event
$(document).on('click', '[id^=button]', evt => {
  const evt_target = evt.currentTarget; // "<div id="button..."
  const index = evt_target.id.replace('button', ''); // "..."
  const btn_target = $('#reply' + index);
  btn_target.addClass('clicked');
});
div[id^="button"]::after {
  content: "click me";
}

.clicked::after {
  content: "clicked";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reply1">1</div>
<div id="reply5">2</div>
<div id="reply20">3</div>
<div id="reply26">4</div>
<div id="reply52">5</div>
<div id="reply61">6</div>

<div id="button1">1</div>
<div id="button5">2</div>
<div id="button20">3</div>
<div id="button26">5</div>
<div id="button52">5</div>
<div id="button61">6</div>
...