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

回答

相關問題