Question

我有一些按钮，我想当用户按下它们显示一些文本并隐藏上一个按钮的文本。看起来很简单，但我的代码不起作用（你可以看到它和这里 - ＆gt; CODE）

//These are the buttons
<div class="row-fluid">
    <div class=" span1 offset0" target="1"> <a href="#" class="circle lnkCollapse">TITLE1</a></div>
    <div class="span1 offset4" target="2"> <a href="#" class="circle lnkCollapse">TITLE2</a></div>
</div>

<div class="box">
  <div class="contentArea">
      <div class="box-title">TITLE:</div>

           //this is the text for the 1st button
           <div id="div1">
                <div class="box-text">
                        Lorem ipsum dolor sit amet
                 </div>           
                 <div class="box-links">
                       <a href="#">GO</a>
                       <a href="#">TEST</a> 
                  </div>
            </div>

           //this is the text for the 2nd button
           <div id="div2">
                <div class="box-text">
                     Lorem ipsum dolor sit amet
                 </div>       
                 <div class="box-links">
                      <a href="#">GO</a>
                      <a href="#">TEST</a> 
                 </div>
          </div>
</div>

在标题中我把它：

    $(document).ready(function() {
         $('.lnkCollapse').click(function () {
               $('.contentArea').hide();
               $('#div' + $(this).attr('target')).show();
         });
    });

没有任何反应..非常感谢！

Answer 1

问题：

jQuery不包含在小提琴中
contentArea元素是容器，您不应该隐藏该元素，您需要隐藏其ID以div
同样，target元素中不存在lnkCollapse属性，它位于父元素

尝试

jQuery(function ($) {
    $('.lnkCollapse').click(function () {
        $('.contentArea div[id^=div]').hide();
        $('#div' + $(this).parent().attr('target')).show();
    });
})

演示：Fiddle

如何完成

//use data-target attribute with the complete target selector
<div class="span1 offset0" data-target="#div1"> <a href="#" class="circle lnkCollapse "> <h3> title 1 </h3></a>

然后

//add a class content to all target div elements to group them
<div class="content" id="div1">
    .....
</div>

然后

jQuery(function ($) {
    var $contents = $('.contentArea .content');
    $('.lnkCollapse').click(function () {
        $contents.hide();
        $($(this).parent().data('target')).show();
    });
})

演示：Fiddle

Answer 2

尝试一下（你的parentNode div隐藏了他的所有孩子，带有按钮的这个子节点通过DOM）：

<div class="box">
  <div class="contentArea">
      <div class="box-title">TITLE:</div>

           //this is the text for the 1st button
           <div id="div1">
                <div class="box-text">
                        Lorem ipsum dolor sit amet
                 </div>           
                 <div class="box-links">
                       <a href="#">GO</a>
                       <a href="#">TEST</a> 
                  </div>
            </div>

           //this is the text for the 2nd button

</div>
<--------- End Container for close

<div id="div2">
                <div class="box-text">
                     Lorem ipsum dolor sit amet
                 </div>       
                 <div class="box-links">
                      <a href="#">GO</a>
                      <a href="#">TEST</a> 
                 </div>
          </div>

Answer 3

使用HTML5数据属性来使用自定义属性 ..这就是为什么数据attr是在html5中引入的..

试试这个

<强> HTML

 ...
 <div class="span1 offset0" data-target="1"> <a href="#" class="circle lnkCollapse"> <h3> title 1 </h3></a>
...

<强> JS

$(function(){
 $('.lnkCollapse').click(function () {
   $('[id^="div"]').hide(); //<--- hide all div starting with id as div
   $('#div' + $(this).parent().data('target')).show();
 });
});

隐藏id为div的所有div，而不是父元素（parent div）。

fiddle here

按按钮并显示文本（并隐藏上一个文本）

3 个答案: