javascript - 表示 "sameness"的 jQuery 选择器？

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>