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

我试图从名为.swatch.selected的div中抓取标题属性，并将其移动到我创建的名为.variationTitle的新div中。我不得不通过jQuery append添加.variationTitle。下面是HTML代码：jQuery将标题标签从一个div附加到另一个div

<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>");

当您单击跨度图像上，一个班的选择被自动添加到范围标记。

来源

2017-08-23 JeanLeSheep

快速草案，在其CLCK要附加这个称号？跨度图像点击？ –

'.swatch.selected'在哪里？ – j08691

是的，当你点击span.swatch跨度的标题被显示在.variationTitle – JeanLeSheep

从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>

来源

2017-08-23 16:29:45

我认为这应该工作：

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

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

你基本上得到属性的值，并设置下一个元素的文本是价值。希望它能帮助:)

来源

2017-08-23 16:29:58

几乎...与上面相同的问题。有多个色板。所以只有第一个出现。 – JeanLeSheep

这里是你如何能做到这一点，

我做了jsfiddle

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

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

来源

2017-08-23 16:47:11 mirvatJ

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

回答

相关问题