用点击的 span 标签的 innerHTML 替换占位符值
Posted
技术标签:
【中文标题】用点击的 span 标签的 innerHTML 替换占位符值【英文标题】:Replace placeholder value with innerHTML of span tag clicked 【发布时间】:2015-02-10 07:12:13 【问题描述】:我想在我的页面上有一个隐藏的搜索表单,以允许用户在点击时过滤标签。我想我一开始走在正确的轨道上,但我可能已经掉进了兔子洞。
到目前为止,我可以替换表单中的值,但我不知道如何运行循环,以便它只返回被点击项目的 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;
【问题讨论】:
【参考方案1】:摆脱onclick,你正在使用jQuery,所以使用它。
$("#tagLinks").on("click", "span.clickable", function()
$('#tagInput').val(this.innerHTML);
);
【讨论】:
谢谢!简单得多。效果很好! 一个快速跟进问题 - 为了让表单在点击时提交,我添加了 $("#tagLinks").on("click", "span.clickable", function() $ ('#tagInput').val(this.innerHTML); ** $("form#tag_search-form").submit(); ** );但它没有运行搜索,我没有收到错误。这里有什么我做错了吗? 不知道表格是什么...mayeb$("form#tag_search-form")[0].submit();
<form id="tag_search_form" name="catcustomcontentform74887" method="post"onsubmit="return checkWholeForm74887(this)" action="/Default.aspx?CCID=24758&amp;FID=345024&amp;ExcludeBoolFalse=True&amp;PageID=15340119"> <label for="CAT_Custom_16">Tags</label> <input id="tagInput" type="text" maxlength="255" value="bibs" name="CAT_Custom_16" id="CAT_Custom_16" /> <input name="tag_search_form" class="cat_button" type="submit" value="Search" /> </form>
ID 不匹配。【参考方案2】:
正如@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");
Related Docs
【讨论】:
感谢您的帮助!这个答案也对我有用。以上是关于用点击的 span 标签的 innerHTML 替换占位符值的主要内容,如果未能解决你的问题,请参考以下文章