Ich arbeite an einem Raster von Bildern, die beim Klicken eine Information zu diesem Raster anzeigen. Ich habe es geschafft, all diese Logik zum Laufen zu bringen. Ich bin jedoch auf ein Problem beim Stylen der Elemente beim Klicken und Bewegen gestoßen.

Wenn der Benutzer über jedem Div schwebt, möchte ich einen orangefarbenen Rand anzeigen, an dem ich arbeite.

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

Wenn der Benutzer auf das Div klickt, möchte ich den orangefarbenen Rand dauerhaft hinzufügen, bis ein anderes Div angeklickt wird. Auf diese Weise können sie sehen, welches aktiv ist.

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

Ich habe eine Geige von dem, was ich erreichen will. Es gibt zwei Zeilen. Die Logik funktioniert für jede Zeile, aber nicht zeilenübergreifend. Wenn Sie einen Client aus der unteren Zeile auswählen, wird der Rahmen angewendet. Wenn Sie dann einen Client aus der oberen Zeile auswählen, wird der Rand des vorherigen Div nicht entfernt.

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

Ich würde mich über jede Hilfe freuen. Ich kann den Code auch hier posten, wenn Sie möchten, aber alles ist enthalten und funktioniert so, wie es in meiner obigen Geige beschrieben ist.

Danke vielmals

0
Javacadabra 12 Aug. 2015 im 10:48

5 Antworten

Beste Antwort

Sie entfernen nur die Klasse von Geschwistern, die das Problem ist

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>
3
Arun P Johny 12 Aug. 2015 im 08:00

Sie können diesen Code ausprobieren:

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

Ich habe den Code nicht getestet, aber er sollte gut funktionieren

1
Sora 12 Aug. 2015 im 08:04
$('.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) {.....

Ändern Sie die Funktion .click () und fügen Sie den obigen Code hinzu.

$('.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>
1
ImHigh 12 Aug. 2015 im 08:20

Ich sehe, wenn Sie das Tag mit der Testimonial-Border-Klasse auswählen und dann einfach diese Klasse entfernen, funktioniert es ...

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

});

1
Wilver Sings 12 Aug. 2015 im 08:09

Versuche dies:

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;

    .....................
1
Sorin C 12 Aug. 2015 im 08:12