Question

我想在jquery中创建一个if / else语句，弹出一个警告框，并根据我选择的div的背景颜色进行更改。

IE）

我有一个状态指示灯，当我按下它时，我收到警报，如果我按OK它会将颜色改为其他颜色，如果按下取消，颜色将保持不变。

我该怎么做？

提前致谢。

这就是代码现在的样子，

HTML

<div id="checklistItem">
    <div class="status1">
        <p class="item1"> Sample item </p> 
    </div>
    <div class="itemInfo1"></div>
</div>

CSS

.status1{
height:15px;
width:15px;
border-radius:15px;
background:red;
position:relative;
top:20px;
left:10px;
cursor:pointer;
}

Jquery的

$(document).ready(function() {
$('.status1').click(function(e) {
    e.preventDefault();
    if (window.confirm("Are you sure?")) {
    }
    });
});

Answer 1

首先，欢迎（返回）StackOverflow，感谢您在问题中编辑更多详细信息！

对此的解决方案非常简单。围绕if对话框的window.confirm语句确定用户选择的内容。如果结果为true，则用户选择“确定”，否则用户选择“取消”。您可以在Mozilla Developer Network上了解详情。

由此我们可以相应地改变背景：

$('.status1').click(function(e) {
    e.preventDefault();

    /* Hold $(this) in a variable to prevent having to recall it.
     * Here $this is equal to the element which has been clicked on.
     */
    var $this = $(this);

    if (window.confirm("Are you sure?")) {
        /* If the user selected "Ok", change the background to green. */
        $this.css({backgroundColor: '#0f0'});
    }
    else {
        /* Otherwise the user selected "Cancel", change the background to red. */
        $this.css({backgroundColor: '#f00'});
    }
});

更好的解决方案是简单地引入一个新的CSS类：

.confirmed {
    background: #0f0; /* Green background. */
}

然后使用jQuery's toggleClass() method添加或删除该类，具体取决于用户是选择确定还是取消：

$this.toggleClass('confirmed', window.confirm("Are you sure?"));

toggleClass()方法接受布尔值（true或false）作为其第二个参数，我们通过window.confirm()提供该值。 'confirmed'是我们要添加或删除的类的名称。

JSFiddle demo

Jquery if / else提醒，根据答案改变颜色

1 个答案: