jQuery - нажав 1 div и измените класс на 2 divs

Question

У меня есть 2 divs по имени yellowUp с стрелками вверх в качестве фоновых изображений.

Как сейчас, когда я нажимаю на div yellowUp, только щелкнув div, измените класс. Как заставить оба divs менять класс на клик?

HTML

<div class="yellowUp"></div> 

<div class="yellowUp"></div> 

<div id="contentContainer"></div> 

CSS

.yellowUp { 
    background-image: url(../images/arrow-up.png); 
} 

.clicked { 
    background-image: url(../images/arrow-down.png); 
} 

JQuery

$(".yellowUp").click(function(event){ 
    event.preventDefault(); 
    if ($(this).hasClass("clicked")) { 
     $("#contentContainer").stop().animate({marginTop:"0px"}, 200);      
    } else { 
     $("#contentContainer").stop().animate({marginTop:"-300px"}, 200); 
    } 
    $(this).toggleClass("clicked"); 
    return false; 
}); 

Answer 1

Если вы хотите как .yellowUp д ivs, чтобы иметь класс .clicked, когда нажимается 1, вместо этого вместо $(this).toggleClass("clicked"); просто выберите класс.

JQuery

$(".yellowUp").toggleClass("clicked"); 

---

$(".yellowUp").click(function(event){ 
 
    event.preventDefault(); 
 
    if ($(this).hasClass("clicked")) { 
 
     $("#contentContainer").stop().animate({marginTop:"0px"}, 200);      
 
    } else { 
 
     $("#contentContainer").stop().animate({marginTop:"-300px"}, 200); 
 
    } 
 
    $('.yellowUp').toggleClass("clicked"); 
 
    return false; 
 
});

.yellowUp { 
 
    color: blue; 
 
} 
 

 
.clicked { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="yellowUp">Hi</div> 
 

 
<div class="yellowUp">Hi</div> 
 

 
<div id="contentContainer">BLah</div>

Answer 2

это потому, что вы только изменить класс щелкнули объекта. вместо этого использовать:

$(document).ready(function(){ 
$('.yellowUp').on('click', function(e){ 
    e.preventDefault(); 
    $('.yellowUp').each(function($key, $index) { 
     if ($(this).hasClass("clicked")) { 
      $("#contentContainer").stop().animate({marginTop:"0px"}, 200);      
     } else { 
      $("#contentContainer").stop().animate({marginTop:"-300px"}, 200); 
     } 
     $(this).toggleClass("clicked"); 
    }); 
}); 
}); 

В предыдущем коде мы разбираем каждый элемент с классом yellowUp для переключения между щелкнул.

надеется, что это поможет!

• Nic

Answer 3

Вы должны изменить эту toggleClass, чтобы выбрать ".yellowUp"

Answer 4

Спасибо Nic,

Я пошел с этой очень простой вариант (для меня по крайней мере):

$(".yellowUp").click(function(event){ 
    event.preventDefault(); 
    if ($(this).hasClass("clicked")) { 
     $("#contentContainer").stop().animate({marginTop:"0px"}, 200); 
     $(".yellowUp").css("background-image", "url(images/arrow-up.png)");      
    } else { 
     $("#contentContainer").stop().animate({marginTop:"100px"}, 200); 
     $(".yellowUp").css("background-image", "url(images/arrow-down.png)"); 
    } 
    $(this).toggleClass("clicked"); 
    return false; 
}); 

Я только что добавил изменение изображения для css для каждого condi Тион.