附加说明：

Question

需要修复简单的逻辑。

如果li在id上有“class”类名，请获取该值并与div容器匹配。如果李＆amp; div id与div容器相同，隐藏其他id容器。

HTML

<ul>
  <li class="slist selected" id="ele1"><a href="javascript:;">Element 1</a></li>
  <li class="slist" id="ele2"><a href="javascript:;">Element 2</a></li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

JS

$('.slist').each(function () {
if($(this).hasClass('selected')) {
    var $filterEle = $('.' + this.id).fadeIn(600);
    $('.cwrapper .contentEle > div.content').not($filterEle).hide();
}
});

由于

Answer 1

我会使用HTML data-*属性，它们得到广泛支持并提供了很大的灵活性。

<强> HTML

<ul>
    <li class="slist selected" id="ele1" data-div-link="ele1div"><a href="javascript:;">Element 1</a></li>
    <li class="slist" id="ele2" data-div-link="ele2div"><a href="javascript:;">Element 2</a></li>
</ul>

<div class="cwrapper">
    <div class="contentEle">
        <div class="content ele1div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
        <div class="content ele2div">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
        </div>
    </div>
</div>

<强> JS

$('.cwrapper').find('div.content').hide();
$('.slist').each(function() {
    var $li = $(this);
    if($li.hasClass('selected')) {
        $('.' + $li.data('div-link')).fadeIn(600);
    }
});

文档：

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes https://api.jquery.com/jquery.data/

Answer 2

问题可能是this.id并不总是返回正确的值，特别是对于jQuery函数，我建议使用$(this).attr('id')代替。

$('.slist').each(function () {
    if($(this).hasClass('selected')) {
       $('.cwrapper .contentEle > div.content').hide();
       $('.' + $(this).attr('id')).fadeIn(600);
    }
    });

Answer 3

我稍微修改了你的javascript。我会隐藏所有.content元素。

然后你可以使用你的.selected类作为选择器并运行那个/那些元素并显示相关的div。

尝试该代码段，我认为它符合您的目标。

＆＃13;

$(".content").hide();
$('.slist.selected').each(function() {
  var $filterEle = $('.' + this.id).fadeIn(1000);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
  <li class="slist" id="ele1"><a href="javascript:;">Element 1</a>
  </li>
  <li class="slist selected" id="ele2"><a href="javascript:;">Element 2</a>
  </li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
      [ele1] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
      [ele2] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

＆＃13;

附加说明：

您正在做的事情没有错，但我同意@RuubW（下文），您应该使用数据属性。请参阅此代码段（适用于点击和上传）：

＆＃13;

$(".content").hide();
$('.slist.selected').each(function() {
  $('.' + $(this).data("divId")).fadeIn(1000);
});
$('.slist').click(function() {
  var $that = this;
  $('.' + $('.slist.selected').data('divId')).fadeOut(500, function() {
    $('.slist.selected').removeClass('selected');
    $($that).addClass('selected')
    $('.' + $('.slist.selected').data('divId')).fadeIn(500)
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
  <li class="slist selected" data-div-id="ele1"><a href="javascript:;">Element 1</a>
  </li>
  <li class="slist" data-div-id="ele2"><a href="javascript:;">Element 2</a>
  </li>
</ul>


<div class="cwrapper">
  <div class="contentEle">
    <div class="content ele1">
      [ele1] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
    <div class="content ele2">
      [ele2] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ve...
    </div>
  </div>
</div>

＆＃13;

根据列表上的id值显示/隐藏div容器div容器

3 个答案:

附加说明：