Question

好的，我想在JavaScript中创建一个OnClick函数，这样当用户点击它时，它就会改变这个词。是否有replaceword()函数或其他东西可以让我这样做？我知道这不是真正的代码，但例如：

<p>Quickly <span onclick="replaceword('Surf');">Search</span> The Web!</p>

如果有，那么有人可以告诉我如何反转代码吗？因此，当他们第二次点击它时，它会变回＆＃34;搜索＆＃34;？

Answer 1

如果你想在多个单词之间跳转，你需要将它们存储在某个地方。你可以在句子中有两个单词，并切换一个或另一个的可见性（它不能很好地缩放），或者你甚至可以将它们存储为放置在元素本身上的属性的值。

<p>Hello, <span data-values="World,People,Stack Overflow">World</span>.</p>

我已将所有可能的值放在data-values属性中。每个不同的值通过逗号与其他值分隔。我们将使用它来创建下一个值数组：

// Leverage event-delegation via bubbling
document.addEventListener( "click", function toggleWords ( event ) {
    // A few variables to help us track important values/references
    var target = event.target, values = [], placed;
    // If the clicked element has multiple values
    if ( target.hasAttribute( "data-values" ) ) {
        // Split those values out into an array
        values = target.getAttribute( "data-values" ).split( "," );
        // Find the location of its current value in the array
        // IE9+ (Older versions supported by polyfill: http://goo.gl/uZslmo)
        placed = values.indexOf( target.textContent );
        // Set its text to be the next value in the array
        target.textContent = values[ ++placed % values.length ];   
    }
});

结果：

enter image description here

以上内容会听取document的点击次数。这是一个很好的选择有很多原因：

您无需等待文档完成加载即可运行此代码
此代码适用于页面生命后期异步添加的任何元素
我们为每个元素设置一个处理程序，而不是为每个元素设置一个处理程序。

有一些警告;您可能遇到阻止点击向上传播到特定父元素的情况。在这种情况下，您可能希望将eventListener添加到您的目标区域附近，因此防止冒泡的可能性较小。

此代码还有其他好处：

逻辑与标记分开
在不调整JavaScript的情况下缩放到任意数量的值

您可以在线查看演示：http://jsfiddle.net/7N5K5/2/

Answer 2

    <p id="abc">Hello</p>
    <input type="submit" name="Change" onclick="change()">



function change(){
var ab=document.getElementById('abc').value;
ab.innerHTML="Hi, Bye";
}

我认为这应该对你有所帮助，你应该去w3schools.com这样的网站，它的基本内容会回答你的疑问

Answer 3

不，没有任何原生功能，但您可以自己创建。

function replaceword(that, word, oword) {
    that.textContent = that.textContent == oword ? word : oword;
}

您可以这样称呼它：

<p>Quickly<span onclick="replaceword(this,'Surf','Search');">Search</span>The Web!</p>

现场演示：http://jsfiddle.net/t6bvA/6

Answer 4

如果你想使用jQuery

，你可以试试这样的东西

http://jsfiddle.net/R3Ume/2/

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<body>

<p>Hello <a id='name'>John<a></p>
<input id="clickMe" type="button" value="replace" onclick="onClick();" />

<script>
function onClick() {    
    $('#name').text('world');
}
</script>

当用户将其单击到另一个单词时，如何创建一个可以更改单词的OnClick函数？

4 个答案: