Question

我有以下HTML：

<h2>Choose an option:</h2>
<a id="option-a" href="javascript:;" "class="shortcode-question ">Option A</a>
<a id="option-b" href="javascript:; " "class="shortcode-question">Option B</a>
<a id="option-c" href="javascript:;" "class="shortcode-question ">Option C</a>
<div id="content-a" class="shortcode-content">Content A</div>
<div id="content-b" class="shortcode-content">Content B</div>
<div id="content-c" class="shortcode-content">Content C</div>

我隐藏内容并显示是否点击了选项：

jQuery(document).ready(function($) {
  $('#question-a').click(function() {
    $('#content-a').show()
  })
})

我认为你可以在这里看到问题。我必须每次直接输入并重复ID。是否有任何选择器：option-[sameness]或content-[sameness]？

Answer 1

您可以使用类选择器，如

jQuery(document).ready(function($) {
  var $contents = $('.shortcode-content');
  $('.shortcode-question').click(function(e) {
    e.preventDefault();
    var $target = $('#' + this.id.replace('option', 'content')).show();
    $contents.not($target).hide();
  })
})

.shortcode-content {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Choose an option:</h2>
<a id="option-a" href="javascript:;" class="shortcode-question">Option A</a>
<a id="option-b" href="javascript:; " class="shortcode-question">Option B</a>
<a id="option-c" href="javascript:;" class="shortcode-question ">Option C</a>
<div id="content-a" class="shortcode-content">Content A</div>
<div id="content-b" class="shortcode-content">Content B</div>
<div id="content-c" class="shortcode-content">Content C</div>

Answer 2

尝试使用startWith selector之类的，

jQuery(document).ready(function($) {
  $('[id^="option-"]').click(function(e) {
      e.preventDefault();
      var cid='#content-'+this.id.replace('option-','');
      $(cid).show();
  });
});

jQuery(document).ready(function($) {
  $('[id^="option-"]').click(function(e) {
      e.preventDefault();
      var cid='#content-'+this.id.replace('option-','');
      $(cid).show();
  })
})

.shortcode-content{
   display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="option-a" href="javascript:;" class="shortcode-question ">Option A</a>
<a id="option-b" href="javascript:; " class="shortcode-question">Option B</a>
<a id="option-c" href="javascript:;" class="shortcode-question ">Option C</a>
<div id="content-a" class="shortcode-content">Content A</div>
<div id="content-b" class="shortcode-content">Content B</div>
<div id="content-c" class="shortcode-content">Content C</div>

Answer 3

可以这么简单：

var options = $('a[id^=option]'), content = $('div[id^=content]');
content.hide();
options.each(function(index){
    $(this).click(function(){
        content.hide();
        content.eq(index).show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<h2>Choose an option:</h2>
<a id="option-a" href="javascript:;" class="shortcode-question">Option A</a>
<a id="option-b" href="javascript:;" class="shortcode-question">Option B</a>
<a id="option-c" href="javascript:;" class="shortcode-question">Option C</a>
<div id="content-a" class="shortcode-content">Content A</div>
<div id="content-b" class="shortcode-content">Content B</div>
<div id="content-c" class="shortcode-content">Content C</div>

Answer 4

一个好的方法是定位类，并使用一些数据属性：

＆＃13;

jQuery(document).ready(function($) {
  $('.shortcode-question').click(function() {
    // use this if you wanna hide others when one is picked:
    var id = $(this).data('id');
    $('.shortcode-content').each(function (item) {
      $(this).toggle($(this).is('#content-' + id));
    });
    // or use this if you don't:
    // $('#content-' + $(this).data('id')).show();
  })
})

＆＃13;

.shortcode-content { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Choose an option:</h2>
<a id="option-a" href="javascript:;" class="shortcode-question" data-id="a">Option A</a>
<a id="option-b" href="javascript:;" class="shortcode-question" data-id="b">Option B</a>
<a id="option-c" href="javascript:;" class="shortcode-question" data-id="b">Option C</a>
<div id="content-a" class="shortcode-content">Content A</div>
<div id="content-b" class="shortcode-content">Content B</div>
<div id="content-c" class="shortcode-content">Content C</div>

＆＃13;

jQuery选择器表示＆＃34;相同＆＃34;？

4 个答案: