jquery hide and show in different places

Question

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

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a> 
<div id='content1' style="display:none"> hide and show 1 </div> 

<script> 
jQuery(document).ready(function(){ 
     jQuery('#hideshow1').on('click', function(event) {   
      jQuery('#content1').toggle('hide'); 
     }); 
    }); 
</script> 

И копию этого все, но затем «hideshow2» и «Content2»

Теперь мне нужно даже третий hideshow3 но я не могу понять, как сделать это умнее только с одним скриптом.

Answer 1

Вместо этого используйте имена классов. Это не даст вам боль писать одно и то же снова и снова:

jQuery(document).ready(function() { 
 
    jQuery('.hideshow').on('click', function(event) { 
 
    jQuery(this).next('.content').toggle('hide'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me1 ! </a> 
 
<div class='content' style="display:none">hide and show 1</div><br> 
 
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me2 ! </a> 
 
<div class='content' style="display:none">hide and show 2</div><br> 
 
<a class="pure-button pure-button-primary hideshow" type='button' value='hide/show1'>Show me3 ! </a> 
 
<div class='content' style="display:none">hide and show 3</div>

Answer 2

использовать JQuery, чтобы показать текст при нажатии кнопки

Вы можете связать их с атрибутами data-. Таким образом, не имеет значения, находятся ли элементы рядом друг с другом и могут быть перемещены в будущем без необходимости переписывать сценарий.

<a class='hideshow' data-hideshow="1">Show me 1!</a> 
<a class='hideshow' data-hideshow="2">Show me 2!</a> 

<div class='content' data-hideshow="1" style="display:none">hide and show 1 </div> 
<div class='content' data-hideshow="2" style="display:none">hide and show 2 </div> 

Тогда ваш скрипт работает на классы и атрибуты:.

$(".hideshow").click(function() { 
    var hideshow = $(this).data("hideshow"); 

    // Optional hide all other .content (not clear if this is required or not) 
    $(".content").hide(); 

    // Show the relevant .content 
    $(".content[data-hideshow=" + hideshow + "]").show(); 
}); 

.hide()/шоу() вызовы можно сделать более эффективным путем объединения с .Не() и других вызовов , но это показывает концепцию.

Answer 3

в атрибуте типа связи и ценит его плохо ...

$(document).ready(function(){ 
 
     $('a[id^="hideshow"]').on('click', function(event) {   
 
      $(this).next().toggle('hide'); 
 
     }); 
 
    });

a{ display: block; cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="pure-button pure-button-primary" id='hideshow1'>Show me1 ! </a> 
 
<div id='content1' style="display:none"> hide and show 1 </div> 
 

 
<a class="pure-button pure-button-primary" id='hideshow2'>Show me2 ! </a> 
 
<div id='content2' style="display:none"> hide and show 2 </div> 
 

 
<a class="pure-button pure-button-primary" id='hideshow3'>Show me3 ! </a> 
 
<div id='content3' style="display:none"> hide and show 3 </div>

Answer 4

я думаю, что вы хотите иметь структуру, подобную кнопка сОн кнопки ДИВ делам. так что используйте этот

jsfiddle

JQ

jQuery(document).ready(function(){ 
    jQuery(".pure-button").on('click', function(event) {   
    var show = $(this).next("div") 
     $(show).toggle('hide'); 
    }); 
}); 

HTML:

<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a> 
<div id='content1' style="display:none"> hide and show 1 </div> 
<a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show2' >Show me2 ! </a> 
<div id='content2' style="display:none"> hide and show 2 </div> 
<a class="pure-button pure-button-primary" type='button' id='hideshow3' value='hide/show3' >Show me3 ! </a> 
<div id='content3' style="display:none"> hide and show 3 </div> 
<a class="pure-button pure-button-primary" type='button' id='hideshow4' value='hide/show4' >Show me4 ! </a> 
<div id='content4' style="display:none"> hide and show 4 </div> 

ИЛИ если ваши дивы не сразу после того, как кнопки, вы можете использовать data-target как так : jsfiddle

HTML:

<a class="pure-button pure-button-primary" type='button' id='hideshow1' data-target="#content1" value='hide/show1' >Show me1 ! </a> 
<a class="pure-button pure-button-primary" type='button' id='hideshow2' data-target="#content2" value='hide/show2' >Show me2 ! </a> 
<a class="pure-button pure-button-primary" type='button' id='hideshow3' data-target="#content3" value='hide/show3' >Show me3 ! </a> 
<a class="pure-button pure-button-primary" type='button' id='hideshow4' data-target="#content4" value='hide/show4' >Show me4 ! </a> 

<div id='content1' style="display:none"> hide and show 1 </div> 
<div id='content2' style="display:none"> hide and show 2 </div> 
<div id='content3' style="display:none"> hide and show 3 </div> 
<div id='content4' style="display:none"> hide and show 4 </div> 

JQ:

jQuery(document).ready(function(){ 
    jQuery(".pure-button").click(function() {   
    var show = $(this).data("target") 
     $(show).toggle('hide'); 
    }); 
}); 

Answer 5

Зачем добавлять классы для выбора элементов? Гораздо проще использовать селектора jQuery соответствующим образом.

Другой подход, считая элемент "#contentx" может быть не последовательным является:

$(function() { 
 
    // get all elements with the id starting with hideshow 
 
    $('[id^="hideshow"]').on('click', function(event) { 
 
    // find all content elements ending with the same 
 
    // substring of the clicked element 
 
    $('#content' + this.id.substr(8)).toggle('hide'); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<a class="pure-button pure-button-primary" type='button' id='hideshow1' value='hide/show1' >Show me1 ! </a> 
 
<div id='content1' style="display:none"> hide and show 1 </div> 
 

 
<a class="pure-button pure-button-primary" type='button' id='hideshow2' value='hide/show1' >Show me1 ! </a> 
 
<div id='content2' style="display:none"> hide and show 1 </div> 
 

 
<a class="pure-button pure-button-primary" type='button' id='hideshow3' value='hide/show1' >Show me1 ! </a> 
 
<div id='content3' style="display:none"> hide and show 1 </div>

Answer 6

$(document).ready(function() { 
    $('.pure-button').on('click', function(event) { 
    var id = $(this).attr('id'); 
    id = id.substring(8); 
    $('#content' + id).toggle('hide'); 
    }); 
}); 

Я думаю, что код поможет, если кнопка щелкнули и дисплейная коробка имеют одинаковую цифровую цифру