Question

我在Magento主题中有一些HTML，我不允许编辑，但我需要提出一些JavaScript来定位一个非常难以定位的项目并更改它的内容。

以下是我必须使用的区域的基本结构，我删除了所有兄弟姐妹，现在只显示相关代码。

此行<label for="options_2074">None</label>将始终具有ID号，因此我无法使用它来定位我的元素。

但我需要将该行的文字从None更改为Black并添加

<span id="backingBlackTooltip"><img src="https://www.neonandmore.com/tooltips/question_mark.png"></span>也就在该行的结束</label>标记之后。

我需要一些帮助来构建JavaScript选择器代码来实现这一目标。

另外要注意，我不能在这个项目中使用jQuery =（

这是我可以使用的主要内容...... #product-options-wrapper .input-box:first .options-list + .label label

任何帮助表示感谢。这里设置了一个JSFiddle .... http://jsfiddle.net/jasondavis/0b61L398/

<div class="product-options" id="product-options-wrapper">

    <dl class="last">

        <dt><label>Backing</label></dt>
        <dd>
            <div class="input-box">
                <ul id="options-2074-list" class="options-list">
                    <li>
                        <input type="radio" id="options_2074" class="radio product-custom-option" name="options[2074]">
                        <span class="label">
                            <label for="options_2074">None</label>
                        </span>
                    </li>
                </ul>
            </div>
        </dd>

    </dl>


</div>

Answer 1

这应该这样做。在文档加载之前，请确保不要运行此代码：

var alreadyFound=false;
[].forEach.call(document.getElementsByTagName('label'),function(curElt){
    if(!alreadyFound&&curElt.getAttribute('for') && curElt.getAttribute('for').indexOf('options_') === 0 && curElt.textContent === 'None'){
        alreadyFound=true;
        curElt.textContent='Black';
        var newSpan=document.createElement('span');
        newSpan.setAttribute('id','backingBlackTooltip');
        var newImg=new Image();
        newImg.setAttribute('src','https://www.neonandmore.com/tooltips/question_mark.png');
        newSpan.appendChild(newImg);
        curElt.parentNode.appendChild(newSpan);
    }
});

工作示例：http://jsfiddle.net/0b61L398/12/

我在做什么：

获取所有<label>元素并开始迭代它们
对于每一项，请检查以下内容是否有效：它具有for属性，for属性以options_开头，<label>的内容为{ {1}}
如果满足这些条件，请将None的内容设为<label>
创建新的Black，并将其<span>属性设置为id
创建一个新的backingBlackTooltip，将其设置为<img>到您提供的网址，然后将其添加为我们刚创建的src的子项
将范围（及其子<span>）附加到<img>的父级，实际上与在关闭<label>代码后立即添加“{/ 1}}

此外，它已被编辑，以便在找到符合所有条件的第一个</label>后停止。 jsfiddle链接已更新以反映此更改

Answer 2

您需要执行以下操作：

var labelElement = document.getElementById("product-options-wrapper").  //#product-options-wrapper
                    getElementsByClassName("input-box")[0].     //.input-box:first
                    getElementsByClassName("options-list")[0].  //.options-list
                    getElementsByClassName("label")[0].         //.label
                    getElementsByTagName("label")[0];           //label

// Change the label content
labelElement.textContent = 'Black';

// Create the image and set its src
var img = new Image();
img.src = 'https://www.neonandmore.com/tooltips/question_mark.png'; 

// Create the span to wrapper the image
var span = document.createElement("span")
span.id = "backingBlackTooltip";
span.appendChild(img);

// Append it to the label parent element
labelElement.parentNode.appendChild(span);

使用JavaScript选择棘手的HTML元素

2 个答案: