Javascript jQuery的问题：单击事件&；在“之间切换”；主动的；元素_Javascript_Jquery_Html_Jquery Mobile

Javascript jQuery的问题：单击事件&；在“之间切换”；主动的；元素

javascript jquery html jquery-mobile

Javascript jQuery的问题：单击事件&；在“之间切换”；主动的；元素,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,好的，这是我的问题，我打赌这对你来说会非常容易（我想这不是…哈哈）假设我有几个divs。一旦用户单击其中一个，我只想突出显示这一个。简而言之：a）从所有divs中删除（如果存在）特定类，b）将其添加到正在单击的div 这是完整的代码 index.html <!DOCTYPE html> <html style='min-height:0px;'> <head> <title>Page Title</title>

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

假设我有几个

div

s。一旦用户单击其中一个，我只想突出显示这一个。简而言之：a）从所有

div

s中删除（如果存在）特定类，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>

自定义.css

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

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.

情况可能不像最初看起来那么简单。我正在使用jQuery1.8.2和jQueryMobile 1.3.2。而实际的页面是在Webview中运行的，它本身就是在Cocoa/OSX应用程序中运行的。很复杂吧？哈哈
我看不到任何错误（不容易访问…不存在的控制台…）。我注意到的唯一一件事是，当我删除
```
removeClass
```
部分时，它确实工作了。加上它，似乎把整个事情搞得一团糟

尝试以下方法：

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

类将根据需要由您自己的非活动和活动选择器替换

这里有一个例子

更新：

有了新的HTML，我把它作为一个

代码如下：

JSFIDLE现有头部/身体标记中的HTML：

<div data-role="page">


</div>

jQuery：

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

我在1.7.2和mobile1.1.1版本的jQuery中测试了这一点，每次单击时都会添加这个类。如果这仍然不起作用，我唯一的建议是将整个内容封装在

$（document）.ready（function（）{//click function}）中

或切换到

$（“div”）。单击（“click”，function（）{}）

看看你试图为我做的几乎相同的事情@rps是的，它是，

$（）==document.ready（）

它应该可以正常工作。有一个问题，您在特定浏览器上注意到了吗？@Dr.Kameleon您正在使用jquery mobile，您是否尝试使用

tap

或

vclick

。请解释您认为它解决了问题的原因。顺便说一句，您假设所有

div

元素都是兄弟元素，通常情况下并非如此。请发布您的html代码，以便可以发布相应的scrpit。您应该对问题进行评论，而不是对您的答案。否则，我是唯一一个得到通知的人，这不是我的问题。我没有对问题发表评论的声誉——令人惊讶的是——尽管仅仅与兄弟姐妹打交道并不是最“优雅”的方式——这是行之有效的方式……嗯，非常奇怪，我尝试了相同的JSFIDLE示例，使用了旧jQuery和jQueryMobile的各种混合，但没有让它停止工作。您是否仍在尝试使用

div

作为选择器，是否也可以使用一些HTML示例更新问题？我刚刚更新了我的答案，如果有帮助，请告诉我！否则，它可能是工作环境的问题，而不是代码本身的问题

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;
}

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