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

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

＆＃13;

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 || '');
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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（）函数并添加上面的代码，它可以工作..

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

JQuery在点击问题上添加了类

5 个答案: