Question

我尝试创建一些内容，当用户点击li中的月份时，jquery会找到className并在其余内容中查找相同的classNme该文档的结果只显示className中的<p>。

例如点击

<li class="jan15">JAN</li>

只会显示

<div class="jan15"><p>January 2015</p></div>

我在将jquery放在一起时遇到了问题。我可以设法找到班级名称，但一旦找到，我就无法找到如何搜索整个班级的班级。

<div>
<ol>
    <li class="years">2015
        <ol>
            <li class="jan15"><a href="#">JAN</a></li>
            <li class="feb15"><a href="#">FEB</a></li>
            <li class="mar15"><a href="#">MAR</a></li>
        </ol>
    </li>
    <li class="years">2014
        <ol>
          <li class="jan14"><a href="#">JAN</a></li>
            <li class="feb14"><a href="#">FEB</a></li>
            <li class="mar14"><a href="#">MAR</a></li>
        </ol>
    </li>
</ol>
</div>


<div class="jan15">
 <p>january 2015</p>
</div>
<div class="feb15">
 <p>february 2015</p>
</div>
<div class="mar15">
 <p>march 2015</p>
</div>
<div class="jan14">
 <p>january 2014</p>
</div>
<div class="feb14">
 <p>february 2014</p>
</div>
<div class="mar14">
 <p>march 2014</p>
</div>

的jQuery

$('.years li').click(function() {
if ($(this).hasClass(this.className)){
        $('.months' + this.className).show();
} else {
$('.months').hide();
}
});

https://jsfiddle.net/30aqp3mj/2/

使用jQuery和新的jsfiddle链接编辑

Answer 1

我会在这些方面做得更多：

$('.' + this.className.match(/\w{3}\d{2}/)).not(this).show().siblings().hide()

下面的代码段更全面地评论。此外，请注意，为了使其工作，要显示或隐藏的元素需要是兄弟姐妹。要做到这一点，只需将它们包装在<div>或其他任何内容中。

＆＃13;

$('.years li').on('click', function(){
  $('.' + this.className.match(/\w{3}\d{2}/)) // Get the date-like class and use it
                                              // in a jQuery selector.
  
  .not(this)                                  // Specify to not include the link you
                                              // clicked.
  
  .show()                                     // Run the current slection of elements
                                              // against the `show` method
  
  .siblings()                                 // Fetch the other hideable elements
  
  
  .hide()                                     // Hide them.
});

＆＃13;

li {list-style-type: none; cursor: pointer;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  	<ol>
  		<li class="years">2015
  			<ol>
  				<li class="jan15">JAN</li>
  				<li class="feb15">FEB</li>
  				<li class="mar15">MAR</li>
  			</ol>
  		</li>
  		<li class="years">2014
  			<ol>
		      <li class="jan14">JAN</li>
  				<li class="feb14">FEB</li>
  				<li class="mar14">MAR</li>
  			</ol>
  		</li>
  	</ol>
  </div>

<div>
  <div class="jan15">
    <p>january 2015</p>
  </div>
  <div class="feb15">
    <p>february 2015</p>
  </div>
  <div class="mar15">
    <p>march 2015</p>
  </div>
  <div class="jan14">
    <p>january 2014</p>
  </div>
  <div class="feb14">
    <p>february 2014</p>
  </div>
  <div class="mar14">
    <p>march 2014</p>
  </div>
</div>

＆＃13;

Answer 2

我已经在你的jquery中改变了一点逻辑，但似乎有效

希望有所帮助

$('.years li a').click(function() {
  className = $(this).parent().attr('class');

  // Only clicked will be visible
  $('.months > div').hide();

  if ($('div.'+className).length > 0){
    $('div.'+className).show();
  }
});

和css

.months > div{
  display:none;
}

通过查找className

2 个答案: