我有電子商務的這一部分代碼。
function appendChildElement() {
var labelOptionSelected = $("#filters fieldset label");
labelOptionSelected.each(function() {
labelOptionSelected.click(function() {
setTimeout(function() {
if ($(labelOptionSelected).hasClass('sr_selected')) {
const text = $('.sr_selected').text();
const insertNode = document.querySelector(".fg-container--filterSelected");
insertNode.innerHTML = "<a href='#' onclick='' class='fg-container--filterSelected-option'>" text " x</a>";
}
}, 500);
});
});
}
appendChildElement();
我需要的是每次<label>點擊，復制所說的文本<label>并將其插入特定鏈接中。
這意味著，如果我單擊 ，則<label 1>復制此文本<label>并使用該文本創建鏈接，如果我單擊<label 2>復制此文本< label> 并將其放入另一個附加鏈接。
我把代碼的例子，因為它目前正在作業
<div class="container">
<!-- Here the links of the clicked labels would be created -->
<a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1Clicked label 2Clicked label 3Clicked label 4</a>
<div>
<fieldset>
<label class="00001" title="00001" index="0">Category Name 1</label>
<label class="00002" title="00002" index="1">Category Name 2</label>
<label class="00003" title="00003" index="2">Category Name 3</label>
<label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>
目前代碼作業但不正確，如果我點擊標簽 1，它會添加帶有文本的鏈接，但如果我另外點擊標簽 2，它會添加文本但在同一個初始鏈接內。并且需要在同一個單獨鏈接中的內容<div>導致如下所示：
<div class="container">
<a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 1</a>
<a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 2</a>
<a href='#' onclick='removeThisFilter()' class='fg-container--filterSelected-option'>Clicked label 3</a>
<div>
<fieldset>
<label class="00001" title="00001" index="0">Category Name 1</label>
<label class="00002" title="00002" index="1">Category Name 2</label>
<label class="00003" title="00003" index="2">Category Name 3</label>
<label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>
該功能主要用于頁面 PDP 中的類別過濾器。
附上他們要求的模型，也許他們會通過影像更好地理解我
小樣
請告訴我你可以幫助我，我已經查看了幾個部分，但我找不到解決方案。
在此先非常感謝
uj5u.com熱心網友回復：
好吧，不確定這是否是您所追求的，但我簡化了您的代碼，使其無法添加兩次相同的鏈接，并添加了一種洗掉鏈接的方法。另外，由于您將其標記為 jquery，因此我將其全部設為 jquery
$("#filters fieldset label").click(function() {
let t = $(this).text().trim();
let newlink = `<a href='#' onclick='removeMe(this)' class='fg-container--filterSelected-option' data-val="${t}">${t}</a>`;
let exists = $(`.container a[data-val="${t}"]`).length > 0;
if (!exists) $('.container').append(newlink)
});
function removeMe(el) {
$(el).remove();
}.container a,
label {
display: block;
margin: 2px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='filters'>
<div class="container">
<!-- Here the links of the clicked labels would be created -->
<div>
<fieldset>
<label class="00001" title="00001" index="0">Category Name 1</label>
<label class="00002" title="00002" index="1">Category Name 2</label>
<label class="00003" title="00003" index="2">Category Name 3</label>
<label class="00004" title="00004" index="3">Category Name 4</label>
</fieldset>
</div>uj5u.com熱心網友回復：
在我看來，您不需要每個<label>標簽。
可以順便添加點擊事件：
<script>
const insertNode = $('.container')
const filters = $('#filters')
$('#filters fieldset label').click(function (e) {
const text = $(this).text();
// Check if a tag with the content TEXT has been added before or not
// You can see detail find() function in here: https://api.jquery.com/find/
// This is my way to check duplicate labels, you can consider another way
const isAdded = insertNode.find('a[data-text="' text '"]');
if (isAdded.length === 0) {
const html = "<a href='#' data-text='" text "' onclick='' class='fg-container--filterSelected-option'>" text " x</a>"
insertNode.append(html)
}
})
</script>
點擊時<label>。div 標簽如下所示：
<div class="container">
<a href="#" data-text="Category Name 1" onclick="" class="fg-container--filterSelected-option">Category Name 1 x</a>
<a href="#" data-text="Category Name 2" onclick="" class="fg-container--filterSelected-option">Category Name 2 x</a>
<a href="#" data-text="Category Name 3" onclick="" class="fg-container--filterSelected-option">Category Name 3 x</a>
</div>
單擊它們時如何洗掉它們。按照你的方式，添加onclick到每個<a>：
<a href='#' onclick='removeThisFilter()'> </a>
或者試試這個方法：
// event handle remove tag
insertNode.delegate('a', 'click', function () {
$(this).remove();
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/371620.html
標籤：javascript html 查询 电子商务