jQuery在點擊問題上添加類

Question

我正在處理一個圖像網格，單擊該圖像將顯示與該網格有關的一條信息。 我設法使所有邏輯起作用。 但是，在單擊和懸停時設置元素樣式時遇到了一個問題。

當用戶將鼠標懸停在每個div上時，我想顯示一個我正在使用的橙色邊框。

    $('.testimonial-box .col-sm-3').hover(function () {
        $(this).toggleClass('testimonials-border'); //Add orange border on hover
    });

當用戶單擊div時，我想永久添加橙色邊框，直到單擊另一個div。 這樣，他們可以看到哪個處於活動狀態。

$('.testimonial-box .col-sm-3').click(function () {
    var testimonial = $(this).attr('id');
    $(this).toggleClass('testimonial-border').siblings().removeClass('testimonial-border');
    switch (testimonial) {
        case "testimonial1":
            $('.client-quote').html('Client 1 Testimonial');
            $('.client-name').html('Client 1');
            break;

我正在努力實現自己的目標。 有兩行。 該邏輯適用於每一行，但不適用於各行。 如果從底行選擇一個客戶，它將應用邊框。 如果您隨后從第一行中選擇一個客戶端，它將不會從上一個div刪除邊框。

https://jsfiddle.net/javacadabra/avbn0myh/

非常感謝您的幫助，如果您願意，我也可以在上面發布代碼，但是正如我上面的提琴一樣，所有代碼都包含在內並且可以正常工作。

非常感謝

Answer 1

您只是從兄弟姐妹中刪除問題所在的類

 var testimonials = { testimonial1: { name: 'Client 1', testimonial: 'Client 1 Testimonial' }, testimonial2: { name: 'Client 2', testimonial: 'Client 2 Testimonial' }, testimonial3: { name: 'Client 3', testimonial: 'Client 3 Testimonial' }, testimonial4: { name: 'Client 4', testimonial: 'Client 4 Testimonial' }, testimonial5: { name: 'Client 5', testimonial: 'Client 5 Testimonial' }, testimonial6: { name: 'Client 6', testimonial: 'Client 6 Testimonial' }, testimonial7: { name: 'Client 7', testimonial: 'Client 7 Testimonial' }, testimonial8: { name: 'Client 8', testimonial: 'Client 8 Testimonial' } } $('.testimonial-box').on('mouseenter mouseleave', '.col-sm-3:not(.testimonial-border)', function(e) { $(this).toggleClass('testimonials-border', e.type == 'mouseenter'); //Add orange border on hover }); $('.testimonial-box .col-sm-3').click(function() { $(this).addClass('testimonial-border').removeClass('testimonials-border').closest('.testimonial-box').find('.testimonial-border').not(this).removeClass('testimonial-border'); var testimonial = testimonials[this.id] || {}; $('.client-quote').html(testimonial.testimonial || ''); $('.client-name').html(testimonial.name || ''); }); 

 .helper { display: inline-block; height: 100%; vertical-align: middle; } .testimonial-border { border: 1px solid #f39300; } .testimonials-border { border: 1px solid #f39300; } .col-md-7.col-md-offset-1.testimonial-box { background: #fff; padding: 0; border-radius: 4px; } .testimonial-box .row { margin: 0; } .row.client-info { background: white; padding: 5%; min-height: 285px; } .testimonial-box h3 { border-top-left-radius: 4px; border-top-right-radius: 4px; } .client-info .fa-quote-left { float: left; color: #f39300; } .client-info .fa-quote-right { float: right; color: #f39300; } p.client-name { font-weight: 400; } 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" /> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script> <div class="col-md-7 col-md-offset-1 testimonial-box"> <div class="row"> <div class="col-sm-3" id="testimonial1"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial2"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial3"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial4"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> </div> <div class="row"> <div class="col-sm-3" id="testimonial5"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial6"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial7"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial8"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> </div> <div class="row client-info"> <div class="col-md-12"> <i class="fa fa-quote-left"></i> <p class="client-quote">Client 1 Testimonial</p> <i class="fa fa-quote-right"></i> <p class="client-name">Client 1</p> </div> </div> </div> 

Answer 2

嘗試這個：

var testimonialBoxes = $('.testimonial-box .col-sm-3');
var lastSelected = $( testimonialBoxes[0] );  // initialize with first element

testimonialBoxes.click(function () {

    var testimonial = $(this).attr('id');
    var $this = $( this );

    lastSelected.removeClass('testimonial-border');
    $this.addClass('testimonial-border');
    lastSelected = $this;

    .....................

Answer 3

您可以嘗試以下代碼：

$('.testimonial-box .col-sm-3').click(function(){
     $('.testimonial-box .col-sm-3').each(function () {
            $(this).removeClass("testimonial-border");
        });
  $(this).addClass("testimonial-border");
});

我沒有測試代碼，但應該可以正常工作

Answer 4

我看到您是否選擇了帶有見證邊框類的標簽，然后僅刪除該類，它就可以工作...

$('.testimonial-box .col-sm-3').click(function () {
var testimonial = $(this).attr('id');
$(".testimonial-border").removeClass("testimonial-border");
$(this).toggleClass('testimonial-border');
switch (testimonial) {
    case "testimonial1":
        $('.client-quote').html('Client 1 Testimonial');
        $('.client-name').html('Client 1');
        break;
    case "testimonial2":
        $('.client-quote').html('Client 2 Testimonial');
        $('.client-name').html('Client 2');
        break;
    case "testimonial3":
        $('.client-quote').html('Client 3 Testimonial');
        $('.client-name').html('Client 3');
        break;
    case "testimonial4":
        $('.client-quote').html('Client 4 Testimonial');
        $('.client-name').html('Client 4');
        break;
    case "testimonial5":
        $('.client-quote').html('Client 5 Testimonial');
        $('.client-name').html('Client 5');
        break;
    case "testimonial6":
        $('.client-quote').html('Client 6 Testimonial');
        $('.client-name').html('Client 6');
        break;
    case "testimonial7":
        $('.client-quote').html('Client 7 Testimonial');
        $('.client-name').html('Client 7');
        break;
    case "testimonial8":
        $('.client-quote').html('Client 8 Testimonial');
        $('.client-name').html('Client 8');
        break;
}

}）;

Answer 5

$('.testimonial-box .col-sm-3').click(function () {
$('.testimonial-box .col-sm-3').removeClass('testimonial-border');
var testimonial = $(this).attr('id');
$(this).toggleClass('testimonial-border');

switch (testimonial) {.....

更改.click（）函數並添加上面的代碼，它即可工作。

 $('.testimonial-box .col-sm-3').hover(function () { $(this).toggleClass('testimonials-border'); //Add orange border on hover }); $('.testimonial-box .col-sm-3').click(function () { $('.testimonial-box .col-sm-3').removeClass('testimonial-border'); //added var testimonial = $(this).attr('id'); $(this).toggleClass('testimonial-border'); //changed switch (testimonial) { case "testimonial1": $('.client-quote').html('Client 1 Testimonial'); $('.client-name').html('Client 1'); break; case "testimonial2": $('.client-quote').html('Client 2 Testimonial'); $('.client-name').html('Client 2'); break; case "testimonial3": $('.client-quote').html('Client 3 Testimonial'); $('.client-name').html('Client 3'); break; case "testimonial4": $('.client-quote').html('Client 4 Testimonial'); $('.client-name').html('Client 4'); break; case "testimonial5": $('.client-quote').html('Client 5 Testimonial'); $('.client-name').html('Client 5'); break; case "testimonial6": $('.client-quote').html('Client 6 Testimonial'); $('.client-name').html('Client 6'); break; case "testimonial7": $('.client-quote').html('Client 7 Testimonial'); $('.client-name').html('Client 7'); break; case "testimonial8": $('.client-quote').html('Client 8 Testimonial'); $('.client-name').html('Client 8'); break; } }); 

 .helper { display: inline-block; height: 100%; vertical-align: middle; } .testimonial-border { border:1px solid #f39300; } .testimonials-border { border:1px solid #f39300; } .col-md-7.col-md-offset-1.testimonial-box { background: #fff; padding: 0; border-radius: 4px; } .testimonial-box .row { margin: 0; } .row.client-info { background: white; padding: 5%; min-height:285px; } .testimonial-box h3 { border-top-left-radius: 4px; border-top-right-radius: 4px; } .client-info .fa-quote-left { float:left; color: #f39300; } .client-info .fa-quote-right { float:right; color: #f39300; } p.client-name { font-weight: 400; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="col-md-7 col-md-offset-1 testimonial-box"> <div class="row"> <div class="col-sm-3" id="testimonial1"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial2"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial3"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial4"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> </div> <div class="row"> <div class="col-sm-3" id="testimonial5"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial6"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial7"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> <div class="col-sm-3" id="testimonial8"> <span class="helper"></span> <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80"> </div> </div> <div class="row client-info"> <div class="col-md-12"> <i class="fa fa-quote-left"></i> <p class="client-quote">Client 1 Testimonial</p> <i class="fa fa-quote-right"></i> <p class="client-name">Client 1</p> </div> </div> </div>