jquery hideと別の場所に表示

Question

私はjqueryを使用してボタンをクリックするとテキストを表示します。 別の場所にある同じページに、別のテキストを表示する別のボタンが必要です。 私のソリューションは現在、それぞれに1つは、この

<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> 

そして、このすべてのコピーのようにDIV複数のスクリプトを作成することですが、その後「hideshow2」と「content2」

で今私も三hideshow3を必要とするが、私はこのスクリプトを1つのスクリプトでよりスマートにする方法を理解できません。

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（）/ショー（）の呼び出しは（.NOTと組み合わせることにより、より効率的にすることができる）、その他のコール。しかし、これは概念を示しています。

Answer 3

リンクtype属性でとその悪い...

$(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

に価値を私はあなたがボタンのdivボタンのdivボタンの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> 
<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> 

ORあなたのdivが直接、ボタンの後、あなたはそうのようなdata-targetを使用することができていない場合：そう

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

HTMLこの

jsfiddle

JQを使用：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'); 
    }); 
}); 

私は、そのコードはあなたを助けるだろうと思い、クリックされたボタンの場合と表示ボックスには同じ数字が付きます