Question

我有两个名为Hide and Show的JavaScript按钮：

<div class="chat-staging"></div>

他们有效，但我想用我设计的<button id="hide">Hide</button> <button id="show">Show</button>替换它们：

CSS buttons

我的问题是他们没有正确地调用jQuery函数，我试图用它的id调用它，如下所示：

<button class="button button1" onclick="hide">Hide</button> 
<button class="button button1" onclick="show">Show</button>

但是当我尝试使用它们时它们不起作用，我将不胜感激任何解决这种情况的建议，请参阅jsfiddle以更好地了解情况。

Answer 1

一个元素可以有多个类和一个ID。

<button class="button button1" id="hide">Hide</button>  
<button class="button button1" id="show">Show</button>

可用于样式化的类，id用于jQuery函数。结合两者都没问题。

您在jQuery代码中看到ID如何用于将事件绑定到它们的点击次数：

$(document).ready(function(){
    $("#hide").click(function(){
        $("#texto").hide();
    });
    $("#show").click(function(){
        $("#texto").show();
    });
});

您尝试添加的onclick关键字是 javascript 事件关键字，不会调用jQuery函数。

在你的小提琴中你混合使用jQuery和普通的javascript，我会鼓励你更加一致，特别是当你不完全确定你在做什么时。

Answer 2

使用类选择器，如：

           $('.button').click(function (evt) {
                if ($(evt.currentTarget).html() == 'Hide') {
                    $("#texto").hide();
                } else if ($(evt.currentTarget).html() == 'Show') {
                    $("#texto").show();
                }
            });

测试https://jsfiddle.net/d6q9qjko/68/

Answer 3

为您的按钮添加不同的ID，然后使用

$('#myButtonID').click(function () {
                doSomething();
            });

或与班级：

$('.myClass').click(function () {
                doSomething();
            });

Answer 4

而不是

<button class="button button1" onclick="hide">Hide</button> 
<button class="button button1" onclick="show">Show</button>

像以前一样使用ID。例如：

<button class="button button1" id="hide">Hide</button> 
<button class="button button1" id="show">Show</button>

Answer 5

JS Fiddle

HTML - aplly ()使其成为函数调用

<button class="button button1" onclick="hide()">Hide</button>
<button class="button button1" onclick="show()">Show</button>

JS - 创建函数

function hide() {
  $("#texto").hide();
}

function show() {
  $("#texto").show();
}

或者只是将这些类应用于id s的当前按钮，并在它已经工作的一天之后调用它：

JS Fiddle

<button id="hide" class="button button1">Hide</button>
<button id="show" class="button button1">Show</button>

如何使用css按钮调用jquery函数？

5 个答案: