jQuery：单击链接时附加数据属性

Question

我希望这些内部跨度的图像在点击下面的show-more按钮时附加与子元素相同的跨度，我不确定是否可能，如果有人知道请解释谢谢你

<span class="comment-text" data-text="<img alt="☺" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png"><img alt="☺" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61a.png">" data-text-short="..." data-text-short-text="See less" data-text-more="See more" style="width: 100%;">
<a class="show-more">See more</a></span>

Answer 1

使用append追加data属性的值

＆＃13;

＆＃13;

$('.show-more').click(function(){

var el = $(this).closest('.comment-text');

el.append(el.attr("data-text"));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="comment-text" data-text="<img alt=&quot;☺&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png&quot;><img alt=&quot;☺&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61a.png&quot;>"
    data-text-short="..." data-text-short-text="See less" data-text-more="See more" style="width: 100%;"> ...
    <a class="show-more">See more</a>
</span>

＆＃13;

＆＃13;

＆＃13;

或

＆＃13;

＆＃13;

$('.show-more').click(function(){

var el = $(this).closest('.comment-text');

el.html(el.attr("data-text"));
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="comment-text" data-text="<img alt=&quot;☺&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png&quot;><img alt=&quot;☺&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png&quot;><img alt=&quot;&quot; class=&quot;emojioneemoji&quot; src=&quot;https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61a.png&quot;>"
    data-text-short="..." data-text-short-text="See less" data-text-more="See more" style="width: 100%;"> ...
    <a class="show-more">See more</a>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以这样做：

$(".show-more").click(function() {
  var container = $(this).closest(".comment-text");
  var datatext = container.attr("data-text")
  container.removeAttr("data-text");
  $(datatext).appendTo(container)
})

<强>演示

$(".show-more").click(function() {
  var container = $(this).closest(".comment-text");
  var datatext = container.attr("data-text")
  container.removeAttr("data-text");
  $(datatext).appendTo(container)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="comment-text" data-text="<img alt=' ☺ ' class='emojioneemoji ' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png '><img alt='☺ ' class='emojioneemoji ' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png
  '><img alt=' ' class='emojioneemoji ' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png '><img alt=' ' class='emojioneemoji ' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png '><img alt='
  ' class='emojioneemoji ' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png '><img alt=' ' class='emojioneemoji ' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png '><img alt='' class='emojioneemoji' src='https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61a.png '>" data-text-short="..." data-text-short-text="See less" data-text-more="See more" style="width: 100%;">
<a class="show-more">See more</a></span>

Answer 3

在单击类（.show-more）时，只需在父级附加自己的数据文本属性值。

$(document).ready(function() {
  $('.show-more').click(function() {
    $(this).parent().append($(this).parent().data('text'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="comment-text" data-text='<img alt="☺" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png"><img alt="☺" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/263a.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61d.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61c.png"><img alt="" class="emojioneemoji" src="https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/1f61a.png">'
  data-text-short="..." data-text-short-text="See less" data-text-more="See more" style="width: 100%;">
<a class="show-more">See more</a></span>