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

ОК, ето моя проблем и обзалагам се, че ще бъде супер лесен за вас (предполагам, че не беше... хаха).

И така, да кажем, че имам няколко div. След като потребителят кликне върху един от тях, искам да подчертая само този. С няколко думи: a) премахнете (ако съществува) конкретен клас от всички divs, 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="/bgjquery.mobile.min.css" />
    <link rel="stylesheet" href="/bgcustom.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, тя наистина работи. Добавянето му изглежда прави цялата работа бъркотия.


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 LOL. Не, divs са само нормалните (да, има и такива!), използвани от jQuery Mobile (<div data-role='page'></div> и т.н.)   -  person Dr.Kameleon    schedule 12.08.2013
comment
FYI, пълният източник е добавен към оригиналния въпрос...   -  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 от OP:

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() {});

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