3

好的，这是我的问题我打赌这对你来说会超级容易（我想这不是……哈哈）。

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

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

索引.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>

自定义.js

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

自定义.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;
}

附言

  • 情况可能并不像最初看起来那么简单。我正在使用 jQuery 1.8.2 和 jQuery Mobile 1.3.2。实际页面在 Webview 中运行，它本身在 Cocoa/OS X 应用程序中。很复杂吧？哈哈

  • 我看不到任何错误（不容易访问...不存在的控制台...）。我唯一注意到的是，当我移除removeClass部件时，它确实有效。添加它，似乎使整个事情变得一团糟。

4

2 回答 2

1 
 $(function() {
 $('div').on( "click", function() {
$(this).addClass('msp-selected');
$(this).siblings().removeClass('msp-selected');
})
于 2013-08-12T11:26:25.307 回答
0

尝试类似：

$(".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");
});

我使用 1.7.2 和移动版 1.1.1 的各种 jQuery 版本对此进行了测试，每次单击时都会添加该类。如果这仍然不起作用，我唯一的建议是将整个东西装入$(document).ready( function() { //click function });或切换到$("div").on("click", function() {});

于 2013-08-12T11:30:21.083 回答