Question

我遇到问题＆＃34;阅读更多＆＃34;切换代码，假设改为＆＃34;读取更少＆＃34;点击时。如何只为被点击的类而不是所有类调用此代码。每个故事都有一个阅读更多的按钮使用相同的类，因此每次点击其中一个故事的阅读更多，它会改变所有其他＆＃34;阅读更多＆＃34;文字到＆＃34;阅读更少＆＃34;。如何让它只更改点击的那个。

这是我的Jquery代码，它工作正常，但在页面上多次调用。我只需要添加一些东西：

$(".morelink_L3").click(function() {
     $(".morelink_L3 span").html($(".morelink_L3 span").html() == 'Read less' ? 'Read more' : 'Read less');
});

HTML：

<div class="story_L3">
Story1 text... Lorem dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<span class="morelink_L3" value="True"><span>Read more</span></span>

<div class="story_L3">
Story2 text... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<span class="morelink_L3" value="True"><span>Read more</span></span>

<div class="story_L3">
Story3 text... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<span class="morelink_L3" value="True"><span>Read more</span></span>

（虽然这与之前修正过的问题有关，但我不得不开始一个新帖子，因为我的文字太长了，无法在最后一篇中作为评论添加）

Answer 1

使用$(this).find("span")代替$(".morelink_L3 span")。

试试这个

$(function(){
  $(".morelink_L3").click(function() {
     $(this).find("span").html($(this).find("span").html() == 'Read less' ? 'Read more' : 'Read less');
  });
});

.morelink_L3{
  color: blue;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="story_L3">
Story1 text... Lorem dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<span class="morelink_L3" value="True"><span>Read more</span></span>
<br><br>
<div class="story_L3">
Story2 text... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div><br>
<span class="morelink_L3" value="True"><span>Read more</span></span>
<br><br>
<div class="story_L3">
Story3 text... Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<span class="morelink_L3" value="True"><span>Read more</span></span>

添加读取更多切换2

1 个答案: