1つの要素から別の要素にデータ属性を渡す

Question

私は2つの主要なhtml要素を持っています。最初の1は、第二は、私がこのように、コンテンツを表示するulで、オプションのグループである：私は何をしようとしている

<optgroup style="display:none;" class="groupOfOptions"> 
    <option value="15" data-upsell="presentation1"> 
    Item 1 
    </option> 
    <option value="3" data-upsell="presentation2"> 
    Item 2 
    </option> 
    <option value="5" data-upsell="presentation3"> 
    Item 3 
    </option> 
</optgroup> 

<ul class="displayedList"> 
    <li> 
    <label> 
    <input value="15" type="radio"> 
    Item 1   
    </label> 
    </li> 
    <li> 
    <label> 
    <input value="3" type="radio"> 
    Item 2   
    </label> 
    </li> 
    <li> 
    <label> 
    <input value="5" type="radio"> 
    Item 3   
    </label> 
    </li> 
</ul> 

はulリストにoptgroupからdata-upsell-typeを割り当てることです。 li項目がoptgroupから一部option要素と同じテキスト（項目1、項目2、項目3）又は入力のvalueを有する場合、そのoptionアイテムからdata-upsellを取り、特定li要素に割り当てます。

これは私が試したものです：

var objWithData = document.querySelector('.groupOfOptions'); 
var listToModify = document.querySelector('.displayedList'); 
var currentText; 
var getDataAttr; 

for (var i = 0; i < objWithData.length; i++) { 
    currentText = objWithData[i].text; 
    getDataAttr = this.getAttribute('data-upsell'); 
    for (var x = 0; x < listToModify.length; i++) { 
    if (listToModify[i].text == currentText) { 
     listToModify[i].dataset.upsell = getDataAttr; 
    } 
    } 
} 

はしかし、何も起こらないと私は分析することのためにエラーがスローされません。誰かがこれを見てくれますか？私はどうなるのか

Answer 1

var objWithData = document.getElementsByClassName('groupOfOptions')[0]; 
 
objWithData = objWithData.getElementsByTagName('option'); 
 
var listToModify = document.getElementsByClassName('displayedList')[0]; 
 
listToModify = listToModify.getElementsByTagName('li'); 
 

 
var listObj = {}; 
 

 
for (var i = 0; i < listToModify.length; i++) { 
 
    var el = listToModify[i]; 
 
    var text = el.innerHTML.replace(/<[^>]*>/g, "").replace(/\\n/g).trim(); 
 
    var value = el.getElementsByTagName('input')[0].value; 
 
    if(!listObj[text]){ 
 
    listObj[text] = []; 
 
    } 
 
    listObj[text].push(el); 
 
    if(!listObj[value]){ 
 
    listObj[value] = []; 
 
    } 
 
    listObj[value].push(el); 
 
} 
 

 
for (var i = 0; i < objWithData.length; i++) { 
 

 
    var el = objWithData[i]; 
 
    var text = el.innerHTML.replace(/\\n/g).trim(); 
 
    var value = el.value; 
 
    var data = el.getAttribute('data-upsell'); 
 
    if(listObj[text]){ 
 
    listObj[text].forEach(function(v){ 
 
     v.dataset.upsell = data; 
 
    }) 
 
    } 
 
    if(listObj[value]){ 
 
    listObj[value].forEach(function(v){ 
 
     v.dataset.upsell = v.dataset.upsell || data; 
 
    }) 
 
    } 
 
    
 
}

<optgroup style="display:none;" class="groupOfOptions"> 
 
    <option value="15" data-upsell="presentation1"> 
 
    Item 1 
 
    </option> 
 
    <option value="3" data-upsell="presentation2"> 
 
    Item 2 
 
    </option> 
 
    <option value="5" data-upsell="presentation3"> 
 
    Item 3 
 
    </option> 
 
</optgroup> 
 

 
<ul class="displayedList"> 
 
    <li> 
 
    <label> 
 
    <input value="15" type="radio"> 
 
    Item 1   
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
    <input value="3" type="radio"> 
 
    Item 2   
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
    <input value="5" type="radio"> 
 
    Item 3   
 
    </label> 
 
    </li> 
 
</ul>

Answer 2

、見上げるオブジェクトのカップルを構築し、一度groupOfOptionsの内部オプションをループです。その後、彼らはアップセル値必要があるかどうかを確認するために、ルックアップオブジェクトを使用して、一度displayedListli要素をループ、：spread

について

// the [...iterable] syntax is just converting the NodeList that querySelectorAll 
 
// returns into an array using the ES6 spread operator. If you can't/don't want 
 
// to use ES6 you could leave it a NodeList and loop over it with a normal 
 
// for loop instead of .forEach like I will below. 
 
// 
 
// The selector .groupOfOptions [data-upsell] looks for all of the elements 
 
// inside of groupOfOptions that have a data-upsell attribute, the option 
 
// elements we want. 
 
let optionNodes = [...document.querySelectorAll('.groupOfOptions [data-upsell]')], 
 
textLookup = {}, 
 
valueLookup = {}; 
 
    
 
// build lookup tables 
 
optionNodes.forEach(function (el) { 
 
    let text = el.textContent.trim(), 
 
    upsell = el.dataset.upsell, 
 
    value = el.value; 
 
     
 
    textLookup[text] = upsell; 
 
    valueLookup[value] = upsell; 
 
}); 
 
    
 
// get the li elements inside of displayedList 
 
let listItems = [...document.querySelectorAll('.displayedList li')]; 
 
    
 
listItems.forEach(function (li) { 
 
    let text = li.textContent.trim(), 
 
    value = li.querySelector('input').value, 
 
    textResult = textLookup[text], 
 
    valueResult = valueLookup[value]; 
 
    // If we found an upsell for text or value 
 
    if (textResult || valueResult) { 
 
    // use the valueResult, fallback to the textResult if there was no valueResult 
 
    li.dataset.upsell = valueResult || textResult; 
 
    // Just for presentation purposes in this answer, 
 
    // I'm also adding it to the title so you can mouse over 
 
    // the list items and see what upsell value they got 
 
    // without needing to inspect the DOM with dev tools. 
 
    li.title = valueResult || textResult; 
 
    } 
 
    
 
});

<optgroup style="display:none;" class="groupOfOptions"> 
 
    <option value="15" data-upsell="presentation1"> 
 
    Item 1 
 
    </option> 
 
    <option value="3" data-upsell="presentation2"> 
 
    Item 2 
 
    </option> 
 
    <option value="5" data-upsell="presentation3"> 
 
    Item 3 
 
    </option> 
 
</optgroup> 
 

 
<ul class="displayedList"> 
 
    <li> 
 
    <label> 
 
    <input value="15" type="radio"> 
 
    Item 1   
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
    <input value="3" type="radio"> 
 
    Item 2   
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
    <input value="5" type="radio"> 
 
    Item 3   
 
    </label> 
 
    </li> 
 
</ul>

• よりは、私はletの代わりvarを使用しました。このコードではそれは問題ではありませんが、ほとんどの場合letを使用するのは良い習慣です。 letはfair well supportedになりました。IE11に戻っても。