jQuery在点击问题上添加类

Question

I am working on a grid of images that when clicked will show a piece of information relating to that grid. I've managed to get all of that logic working. However, I've run into an issue with styling the elements on click and hover.

When the user hovers over each div I would like to display an orange border which I have working.

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

When the user clicks on the div I would like to add the orange border permanently until another div is clicked. This way they can see which one is active.

$('.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;

I've a fiddle of what I'm trying to achieve. There are two rows. The logic works for each row but it doens't work across rows. If you select a client from the bottom row it will apply the border. If you then select a client from the top row it will not remove the border from the previous div.

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

I'd appreciate any help on this, I can post the code on this as well if you'd like, however it's all containined and working as is in my fiddle above.

Many thanks

Answer 1

You are just removing the class from siblings that is the problem

 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

Try this:

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

you can try this code :

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

I did not test the code but it should work fine

Answer 4

i see if you select the tag with the testimonial-border class and then just remove that class, it works...

$('.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) {.....

Change .click() function and add the above code and it works..

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