Question

有没有更好的方法来编写这个简单的点击脚本？

尽管如此，每个街区都有一致的编号。而不是为10个不同的列表项重复10次，有更好的方法吗？

内容不在李的孩子身上。所以我不能和他们一起打球（这个）

继承人正在努力的事情：

docker run -d user/image

Answer 1

您可以在jQuery中使用^属性选择器，如下所示：

$( '[class^=artist_li]' ).click(function() {
    $( '.artist_content' ).removeClass( "active" );
    $( '.artist_content1' ).addClass( "active" );
});

[class^=artist_li]匹配具有以artist_li
开头的class属性的元素

更新：根据您提供的链接使用jQuery代替$，您使用的是jQuery v 1.12

如需更多帮助，请参阅下面的代码块

＆＃13;

$(function(){

  $("[class^=artist_li]").on('click', function() {
    alert($(this).text());
  });

});

＆＃13;

li {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class="artist_li1">Click 1</li>
    <li class="artist_li2">Click 2</li>
    <li class="artist_li3">Click 3</li>
    <li class="artist_li4">Click 4</li>
  </ul>
</div>

＆＃13;

希望这有帮助！

Answer 2

你可以做循环：

for(var i = 1; i < 3; i++) {
    (function(index) {
        $( '.artist_li'+index ).click(function() {
            $( '.artist_content' ).removeClass( "active" );
            $( '.artist_content'+index ).addClass( "active" );
        });
    }(i));

}

Answer 3

为了提供更好/更有效的答案，查看HTML会很有帮助。但我离题了，并建议以下内容 -

假设某些HTML结构如下所示 - 如果使用相对于单击元素的DOM遍历，则可以不需要索引

＆＃13;

$(document).on('click', '.artist_li', function(){
  $('.artist_content').removeClass('active');
  
  //this will find the child div inside the list element that
  //was just clicked. Removing the need for indexing
  $(this).children('.artist_content').addClass('active');
});

＆＃13;

.active {
  color: red;
}

li {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <!-- Adding extra class artist_li to illustrate various method -->
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content1 active">Content 1</div>
  </li>
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content2">Content 2</div>
  </li>
  <li class="artist_li1 artist_li">
    <div class="artist_content artist_content3">Content 3</div>
  </li>
</ul>

＆＃13;

有没有更好的方法来编写这个javascript / jquery？

3 个答案: