3

OK、これが私の問題です。私はそれがあなたにとって非常に簡単になると確信しています（そうではなかったと思います... 笑）。

それで、私がいくつかdivの s を持っているとしましょう。ユーザーがそのうちの 1 つをクリックしたら、この 1 つだけを強調表示したいと思います。簡単に言うと、a)すべての から特定のクラスを削除 (存在する場合) 、b)クリックさdivれているクラスに追加します。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");
    });
});

カスタム.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;
}

PS

  • 状況は当初のように単純ではないかもしれません。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 に答える