JQuery在点击问题上添加了类(JQuery adding class on click issue)

JQuery在点击问题上添加了类(JQuery adding class on click issue)

我正在制作一个图像网格，点击后会显示与该网格相关的信息。 我已经设法让所有的逻辑工作。 但是，我遇到了在点击和悬停时设置元素样式的问题。

当用户将鼠标悬停在每个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/

我对此有任何帮助表示感谢，如果您愿意的话，我也可以在此发布代码，但是它在我上面的小提琴中都是包含和工作的。

非常感谢

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

最满意答案

你只是从兄弟姐妹中删除这个问题

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> 
  
 
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>