Проблема с jQuery: событие щелчка и переключение между активными элементами

Хорошо, вот моя проблема, и держу пари, она будет очень легкой для вас (думаю, это было не так... лол).

Итак, допустим, у меня есть несколько div. Как только пользователь нажимает на один из них, я хочу выделить только этот. В нескольких словах: а) удалите (если существует) определенный класс из всех 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>

пользовательский.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;
}

P.S.

  • Ситуация может оказаться не такой простой, как казалось изначально. Я использую jQuery 1.8.2 и jQuery Mobile 1.3.2. И фактическая страница работает внутри Webview, сама внутри приложения Cocoa/OS X. Довольно сложно, да? ржунимагу

  • Я не вижу никакой ошибки (нелегко иметь доступ к консоли, которой... не существует...). Единственное, что я заметил, это то, что когда я удаляю часть removeClass, она работает. Добавление этого, кажется, делает все это беспорядок.


javascript html jquery jquery-mobile
person Dr.Kameleon    schedule 12.08.2013    source источник
comment
Посмотрите stackoverflow.com/questions/18129040/ Почти то же самое, что вы пытаетесь сделать   -  person Frank    schedule 12.08.2013
comment
То, что у вас есть, должно работать именно так, как вы описываете, поэтому должна быть какая-то другая проблема. Вы включили jquery.js на свою страницу?   -  person Rory McCrossan    schedule 12.08.2013
comment
у меня работает jsfiddle.net/MLvuq   -  person Ricardo Binns    schedule 12.08.2013
comment
Работает: jsfiddle.net/nabil_kadimi/yVxhK   -  person Nabil Kadimi    schedule 12.08.2013
comment
@rps да, $() == document.ready()   -  person Nabil Kadimi    schedule 12.08.2013
comment
какую версию jquery вы используете или есть ли какие-либо ошибки на вашей консоли?   -  person Ricardo Binns    schedule 12.08.2013
comment
он должен работать и работать, как ожидалось. один вопрос, вы заметили это в конкретном браузере?   -  person Akki619    schedule 12.08.2013
comment
@NabilKadimi да, не правильно заметил!   -  person    schedule 12.08.2013
comment
Я отредактировал пост, пожалуйста, посмотрите! :-)   -  person Dr.Kameleon    schedule 12.08.2013
comment
@Dr.Kameleon хорошее редактирование ... лол :)   -  person Ricardo Binns    schedule 12.08.2013
comment
@ Dr.Kameleon, вы используете jquery-mobile, пробовали ли вы использовать tap или vclick..   -  person Ricardo Binns    schedule 12.08.2013
comment
еще одна обработка?!! о, это мне понятно!   -  person    schedule 12.08.2013
comment
Хахаха! Смешные вы... :-)   -  person Dr.Kameleon    schedule 12.08.2013
comment
@RicardoArruda Я сделал, и это тоже не сработало. Кстати, я не думаю, что это может иметь какое-либо отношение к обработке сенсорных жестов jQuery Mobile — хотя оно основано на jQuery Mobile, оно не должно работать на мобильном устройстве (почему я использую jQuery Mobile, вы спрашивать... - имеет смысл! лол)   -  person Dr.Kameleon    schedule 12.08.2013
comment
Нет, не так смешно, как ты, @Dr.Kameleon, после того, как мы намотали нас с Бьюсь об заклад, тебе будет очень легко, P.S. было действительно чем-то, не так ли? какие-либо другие классы уже присутствуют в этом div?   -  person    schedule 12.08.2013
comment
@rps ЛОЛ. Нет, div — это обычные (да, они тоже есть!) Используемые jQuery Mobile (<div data-role='page'></div> и т. д.)   -  person Dr.Kameleon    schedule 12.08.2013
comment
К вашему сведению, к исходному вопросу добавлен полный источник...   -  person Dr.Kameleon    schedule 12.08.2013

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте что-то вроде:

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

Вот код:

HTML в существующих тегах head/body jsFiddle:

<div data-role="page">


</div>

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 и мобильной версии 1.1.1, при этом класс каждый раз добавлялся по щелчку. Мое единственное предложение, если это все еще не работает, - заключить все это в $(document).ready( function() { //click function }); или переключиться на $("div").on("click", function() {});.

person Matt    schedule 12.08.2013
comment
Хм, очень странно, я пробовал тот же пример jsFiddle, используя различные смеси старых jQuery и jQuery Mobile, и он не перестал работать. Вы все еще пытаетесь использовать div в качестве селектора и не могли бы вы добавить в вопрос несколько примеров HTML? - person Matt; 12.08.2013
comment
Я только что обновил свой ответ, дайте мне знать, если это поможет! В противном случае это может быть проблема со средой, в которой он работает, а не с самим кодом. - person Matt; 12.08.2013

arrow_upward

arrow_downward

person    schedule
comment
Пожалуйста, объясните, почему вы думаете, что это решает проблему. Кстати, вы предполагаете, что все элементы div являются братьями и сестрами, что, как правило, не так. - person Felix Kling; 12.08.2013
comment
Пожалуйста, опубликуйте свой html-код, чтобы можно было опубликовать соответствующий скрипт. - person Ramki; 12.08.2013
comment
Вы должны комментировать вопрос, а не свой ответ. В противном случае я единственный, кто получает уведомление, и это не мой вопрос. - person Felix Kling; 12.08.2013
comment
у меня нет репутации, чтобы комментировать вопрос - person Ramki; 12.08.2013
comment
Удивительно - хотя работать только с siblings не самый элегантный способ - это способ, который работает... - person Dr.Kameleon; 12.08.2013