Question

好的，这是我的问题和~~我打赌它对你来说非常容易~~（我猜它不是......大声笑）。

所以，假设我有几个div。一旦用户点击其中一个，我想突出显示这一个。简而言之：a）从所有div中删除（如果存在）特定类，b）将其添加到被点击的div。

这是完整的代码......

的index.html

<!DOCTYPE html> 
<html style='min-height:0px;'> 
<head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"> 

    <link rel="stylesheet" href="jquery.mobile.min.css" />
    <link rel="stylesheet" href="custom.css" />

    <script src="jquery.min.js"></script>
    <script src="jquery.mobile.min.js"></script>
</head> 

<body> 
    <div data-role="page">


    </div>
    <script src="custom.js"></script>
</body>
</html>

custom.js

$(function() {
    $("div").click( function() {
        $("div").removeClass("msp-selected");
        $(this).addClass("msp-selected");
    });
});

custom.css

media screen and (orientation: portrait) {
    .ui-mobile, .ui-mobile .ui-page {
        min-height: 420px;
    }
}
media screen and (orientation: landscape) {
    .ui-mobile, .ui-mobile .ui-page {
        min-height: 300px;
    }
}

div {
    outline:0;
}

div:hover {
    outline-width:1px;
    outline-color:red;
    outline-style: dotted;
    overflow:hidden;

}

.msp-selected {
    outline-width:1px;
    outline-color:red;
    outline-style: solid;
}

P.S。

情况可能并不像最初看起来那么简单。我正在使用jQuery 1.8.2和jQuery Mobile 1.3.2。实际的页面在Webview中运行，它本身位于Cocoa / OS X应用程序中。相当复杂，是吧？洛尔
我看不到任何错误（不容易访问控制台......不存在......）。我注意到的唯一一件事是，当我删除removeClass部分时，它确实有效。添加它，似乎使整个事情变得一团糟。

Answer 1

 $(function() {
 $('div').on( "click", function() {
$(this).addClass('msp-selected');
$(this).siblings().removeClass('msp-selected');
})

Answer 2

尝试类似：

$(".box").click( function() {
    if($(".activeBox").length > 0) { //check if there is an activeBox element
    $(".activeBox").removeClass("activeBox"); //if there is, remove it
}
    $(this).addClass("activeBox"); //make the clicked div the activeBox
});

您可以根据需要将

.box和.activeBox类替换为您自己的非活动和有效选择器。

这是一个jsFiddle示例

更新

使用新的HTML，我将其作为jsFiddle

工作

以下是代码：

jsFiddle现有的head / body标签中的HTML：

<div data-role="page">


</div>

来自OP的

CSS：

div {
    outline:0;
}

div:hover {
    outline-width:1px;
    outline-color:red;
    outline-style: dotted;
    overflow:hidden;
}

.msp-selected {
    outline-width:1px;
    outline-color:red;
    outline-style: solid;
}

jQuery：

$("div").click( function() {
    if($(".msp-selected").length > 0) {
        $(".msp-selected").removeClass("msp-selected");
    }
    $(this).addClass("msp-selected");
});

我使用各种版本的jQuery（1.7.2和mobile 1.1.1）对此进行了测试，每次点击都会添加该类。我的唯一建议是，如果这仍然无效，请将整个内容包含在$(document).ready( function() { //click function });中或切换到$("div").on("click", function() {});

jQuery问题：点击事件＆amp;在“活动”元素之间切换

2 个答案: