jQuery - добавьте кнопку show/hide для каждого DIV динамически

Question

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

Так это то, что у меня есть:

• HTML страница с некоторым DIVs.
• Я хочу динамически добавлять кнопку SHOW/HIDE в конце каждого DIV.
• Если я нажму на эту кнопку, DIV выше этой кнопки show/hide исчезнет.
• Кнопка HIDE должна быть SHOW. Если я снова нажму, он снова покажет DIV.

---

Я знаю, как добавить кнопку показать/скрыть в конце каждого дел. Я не знаю, как сказать каждой кнопке, что DIV над ним должен быть скрыт.

У divs нет уникального идентификатора, поэтому я думаю, что я также должен добавить уникальный идентификатор для каждого DIV. Я хочу сделать это с помощью jQuery.

Так что я думаю, что я должен сделать какой-то цикл foreach. Я должен пройти через каждый DIV, добавить уникальный идентификатор, добавить уникальную кнопку show/hide, которая указала бы точное число DIV, чтобы скрыть/показать.

Я правильно понял логику? Может ли кто-нибудь показать мне точный синтаксис? Я не только ищу правильный код, но и вижу, есть ли у меня правильная логика.

Спасибо

Answer 1

$('button').click(function() { 
 
    $(this).parent().prev().toggle(); 
 
    if ($(this).text() == 'Show') { 
 
    $(this).text('Hide'); 
 
    } else { 
 
    $(this).text('Show'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>a 
 
    <button>Hide</button> 
 
</div> 
 
<div>b 
 
    <button>Hide</button> 
 
</div> 
 
<div>c 
 
    <button>Hide</button> 
 
</div> 
 
<div>d 
 
    <button>Hide</button> 
 
</div>

Или вы имеете в виду, как это:

$('button').click(function() { 
 
    $(this).prev().toggle(); 
 
    if ($(this).text() == 'Show') { 
 
    $(this).text('Hide'); 
 
    } else { 
 
    $(this).text('Show'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><span>a</span> 
 
    <button>Hide</button> 
 
</div> 
 
<div><span>b</span> 
 
    <button>Hide</button> 
 
</div> 
 
<div><span>c</span> 
 
    <button>Hide</button> 
 
</div> 
 
<div><span>d</span> 
 
    <button>Hide</button> 
 
</div>

или как это:

$('button').click(function() { 
 
    $(this).prev().toggle(); 
 
    if ($(this).text() == 'Show') { 
 
    $(this).text('Hide'); 
 
    } else { 
 
    $(this).text('Show'); 
 
    } 
 
});

div {display: inline}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>a</div> 
 
    <button>Hide</button><br/> 
 

 
<div>b</div> 
 
    <button>Hide</button><br/> 
 

 
<div>c</div> 
 
    <button>Hide</button><br/> 
 

 
<div>d</div> 
 
    <button>Hide</button><br/>