0

我在一个“li”标签中创建了两个跨度类，我希望它们在我按下按钮时切换，我得到的问题是它们都出现并且我的 JS 不工作，我在 jsfiddle 上检查了我的 js也但没有出现错误

这是小提琴

$(document).ready(function () {
$(".smiley").click(function () {


    if ($('button').clicked) {
        $('.off').css('display' ,'true');
        $('.on').css('display', 'none');
    } else {
        $('.off').css('display', 'none');
    }
});

});

4

2 回答 2

2

在 jQuery 中，您可以使用.toggle()

以下是您的小提琴中的错误：

(1) 您错过了在 jsfiddle 的左上角添加可用的 jQuery 库。

(2) 没有什么可以display: off代替使用display: none

$('.off').css('display' ,'off');  //wrong

.smiley(3)您的代码中没有调用类。

$(".smiley").click(function () { //wrong and unnecessary

(4) 没有这样的可用

if ($('button').clicked) { //wrong and unnecessary

(5) 你需要了解更多关于选择器 的MDN

我已经调整了您的代码，如下所示

$(document).ready(function () {
    $("button").on('click', function () {
        $('.toggle').toggle();
    });
});

工作小提琴

于 2013-07-16T18:58:39.860 回答
0

检查这个小提琴：

JSFIDDLE

您没有包含 jquery，并且您的脚本全是 janky。在阅读了您的问题后，我对其进行了清理，以按照我认为您想要的方式工作。

JS

$(document).ready(function(){

    $('button').click(function() {
        $('.switching_spans').toggleClass('on');
    });

});

HTML

<div id="fiddle">
    <span class="switching_spans">1</span>
    <span class="switching_spans on">!</span>
</div>

CSS

.switching_spans {
    width:30px;
    height:30px;
    background:blue;
}
.on{
    background:green;
}
于 2013-07-16T19:01:29.073 回答