将占位符值替换为单击的 span 标记的内部 HTML

Replace placeholder value with innerHTML of span tag clicked

本文关键字：span 内部 HTML 单击 占位符 替换      更新时间：2023-09-26

我想在我的页面上有一个隐藏的搜索表单，以允许用户在点击时过滤标签。我想我一开始就走在正确的轨道上，但我可能掉进了兔子洞。

到目前为止，我可以替换表单中的值，但我不知道如何运行循环，以便它只返回单击的项目的 innerHTML。它目前运行所有选项并在最后一个停止。

任何帮助都非常感谢。

这是我对标签的内容：

<div id="tagLinks" class="tags" >
    <span class="clickable" onclick="getValue();">Social Media</span>,   
    <span class="clickable" onclick="getValue();">Business</span>, 
    <span class="clickable" onclick="getValue();">Content</span>, 
    <span class="clickable" onclick="getValue();">Marketing</span>, 
    <span class="clickable" onclick="getValue();">Engagement</span>, 
    <span class="clickable" onclick="getValue();">Facebook</span>, 
    <span class="clickable" onclick="getValue();">Twitter</span>, 
    <span class="clickable" onclick="getValue();">Google Plus</span>
</div>

这是我的javascript： $（document）.ready（function（） {

    var tagArray = document.getElementById("tagLinks").innerText.split(', ');
    var spanObj; 
    tagArray.forEach(createElement);
    function createElement(arrayItem, index, array) {
        spanObj = "<span class='clickable' onclick='getValue();'>" + arrayItem + "</span>";
        tagArray[index] = spanObj.toString();
        document.getElementById("tagLinks").innerText = "";
        $("#tagLinks").append(tagArray.join(", "));
        $('#tagLinks').css('cursor','pointer');
    }
  function getValue() {        
    var value = document.getElementById('tagInput').value;
    var newValues = document.getElementsByClassName('clickable');
            for(var i=0; i < newValues.length; i++) {
               document.getElementById('tagInput').value =  newValues[i].innerHTML;     
            }
    }

摆脱onclick，你正在使用jQuery，所以使用它。

$("#tagLinks").on("click", "span.clickable", function() {
    $('#tagInput').val(this.innerHTML); 
});
正如

@epascarello所说，如果你正在使用jquery，你应该正确使用它。

无论如何，这里有一个纯粹的JavaScript答案：

function getValue() {        
    var value = document.getElementById('tagInput').value;
    var newValues = document.getElementsByClassName('clickable');
            for(var i=0; i < newValues.length; i++) {
                document.getElementById('tagInput').setAttribute("src","newValues[i].innerHTML");     
            }
    }

相关文档

相关文章：