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

而是使用类名。这不会让你痛苦地反复写同样的事情：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在链接类型属性中并将其值设为错误...

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

使用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();
});

通过与.not（）和其他调用相结合，可以提高.hide（）/。show（）调用的效率，但这显示了这个概念。

Answer 4

我想你想要一个像按钮div按钮div按钮div的结构。所以使用这个

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

或如果您的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

    Builder builder = Settings.builder();

    builder.headless(true);
    builder.javascript(true);
    builder.quickRender(true);
    builder.timezone(Timezone.ASIA_CALCUTTA);
    builder.userAgent(UserAgent.CHROME);

    JBrowserDriver jbd = new JBrowserDriver(builder.build());

如果点击的按钮和显示框具有相同的数字

，我认为代码会对您有所帮助

jquery在不同的地方隐藏和显示

6 个答案: