jQuery 将标题标签从一个 div 附加到另一个 div答案

【问题标题】：jQuery append title tag from one div to another divjQuery 将标题标签从一个 div 附加到另一个 div
【发布时间】：2017-08-23 16:22:27
【问题描述】：

我正在尝试从名为 .swatch.selected 的 div 中获取 title 属性，并将其移动到我创建的名为 .variationTitle 的新 div 中。我还必须通过 jQuery append 添加 .variationTitle 。这是 HTML 代码：

<div class="tawcvs-swatches" data-attribute_name="attribute_pa_foundation-shades">
  <span class="swatch swatch-image swatch-vanilla " title="Vanilla" data-value="vanilla">
    <img src="image tag here" alt="Vanilla">
  </span>
<div class="variationTitle"></div>
</div>

jQuery:

$( ".tawcvs-swatches" ).append( "<div class='variationTitle'></div>" );

当您单击跨度图像时，已选择的类会自动添加到跨度标记中。

【问题讨论】：

那么你想在哪个时钟上附加那个标题？跨度图片点击？
.swatch.selected在哪里？
是的，当您单击 span.swatch 时，该跨度的标题会显示在 .variationTitle 中
当您单击 span.swatch 时，会自动添加一类 .selected。这是默认功能的一部分。
您是想让variationTitle 的标题与您的.swatch.selected 相同，还是想让它作为文本显示给用户？

标签： jquery

【解决方案1】：

我认为这应该可行：

http://jsfiddle.net/hHLXr/364/

$('.swatch').click(function() {
    var text = $(".swatch").attr("title");
    $('.variationTitle').text(text);
});

您基本上获取属性的值并将下一个元素的文本设置为该值。希望对你有帮助:)

【讨论】：

几乎...和上面一样的问题。有多个样本。所以只有第一次出现。

【解决方案2】：

从title 属性中获取标题。在图像上放置一个侦听器以在单击时放入文本。

var title = $('.swatch-vanilla').attr('title');

$('img').on('click', function() {
  $('.variationTitle').text(title);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tawcvs-swatches" data-attribute_name="attribute_pa_foundation-shades">
  <span class="swatch swatch-image swatch-vanilla " title="Vanilla" data-value="vanilla">
    <img src="http://via.placeholder.com/350x150?text=Vanilla" alt="Vanilla">
  </span>
<div class="variationTitle"></div>
</div>

以上内容适用于特定示例，但您可以使其更加健壮：

$('.swatch').on('click', function() {
  var title = $(this).attr('title');
  $(this).siblings('.variationTitle').text(title);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tawcvs-swatches" data-attribute_name="attribute_pa_foundation-shades">
  <span class="swatch swatch-image swatch-vanilla " title="Vanilla" data-value="vanilla">
    <img src="http://via.placeholder.com/350x150?text=Vanilla" alt="Vanilla">
  </span>
<div class="variationTitle"></div>
</div>
<div class="tawcvs-swatches" data-attribute_name="attribute_pa_foundation-shades">
  <span class="swatch swatch-image swatch-chocolate " title="Chocolate" data-value="vanilla">
    <img src="http://via.placeholder.com/350x150?text=Chocolate" alt="Chocolate">
  </span>
<div class="variationTitle"></div>
</div>
<div class="tawcvs-swatches" data-attribute_name="attribute_pa_foundation-shades">
  <span class="swatch swatch-image swatch-peach " title="Peach" data-value="vanilla">
    <img src="http://via.placeholder.com/350x150?text=Peach" alt="Peach">
  </span>
<div class="variationTitle"></div>
</div>

【讨论】：

【解决方案3】：

你可以这样做，

我在jsfiddle做了一个快速草稿

$( ".tawcvs-swatches" ).append( "<div class='variationTitle'></div>" );

$('span.swatch').on('click',function(){
  $(this).siblings('.variationTitle').html($(this).attr('title'));
})

【讨论】：