jQuery: добавление атрибутов данных при нажатии на ссылку

Question

Я хочу, чтобы эти изображения, которые находятся внутри промежутка, добавлялись в тот же промежуток, что и дочерние элементы, при нажатии кнопки «Показать больше» ниже, я не уверен, возможно ли это или нет, если кто-нибудь знает, пожалуйста, объясните спасибоВы.

---

<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

Вы можете сделать это так:

$(".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 2

Просто добавьте родительский элемент со своим собственным значением атрибута data-text при нажатии на класс (.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>

Answer 3

Используйте команду append для добавления значения атрибута данных.

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

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

el.append(el.attr("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=&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>

или

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

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

el.html(el.attr("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=&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>