Machen Sie meine jQuery kürzer?

Question

Ich möchte meine JQuery verkürzen. Ich weiß, dass dies mit diesem Element und Kind möglich ist, aber ich weiß nicht, wie es funktioniert?

Ich habe ein Element zu zeigen und versteckt auf Klick im Grunde. Sie haben alle die gleiche ID, nur eine andere Klasse.

Wie ist es möglich, dies zu erreichen?

Dies ist, was mein html wie folgt aussieht:

<div id="spotparent"> 

    <div id="spot" class="one" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="one"> 
        <img src="img/line-boost.png"> 

      </div> 
     </div> 

<div id="spot" class="two" style="position: absolute; z-index: 103; width: 25px; height: 25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="two"> 
        <img src="img/line-tpu.png"> 

      </div> 
     </div> 

      <div id="spot" class="three" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="three"> 
        <img src="img/line-wrap.png"> 

      </div> 
     </div> 

      <div id="spot" class="four" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="four"> 
        <img src="img/line-support.png"> 

      </div> 
     </div> 

     <div id="spot" class="five" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="five"> 
        <img src="img/line.png"> 

      </div> 
     </div> 

     <div id="spot" class="six" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="six"> 
        <img src="img/line-knit.png"> 

      </div> 
     </div> 


     <div id="spot" class="seven" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
      <div id="ball"></div> 
      <div id="pulse"></div> 

      <div id="contentspot" class="seven"> 
        <img src="img/line-signature.png"> 

      </div> 
     </div> 

     </div> 

Der Punkt auf Klick auf einer Stelle id ist, die id ‚contentspot‘ show (zu blockieren, indem eine Klasse Makel, die die Anzeige von keinem ändern).

dafür verwende ich die folgende JQuery:

$('#spot.one').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.one').toggleClass('showcontent'); 

}); 


$('#spot.two').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.two').toggleClass('showcontent'); 

}); 

$('#spot.three').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.three').toggleClass('showcontent'); 

}); 

$('#spot.four').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.four').toggleClass('showcontent'); 

}); 

$('#spot.five').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.five').toggleClass('showcontent'); 

}); 

$('#spot.six').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.six').toggleClass('showcontent'); 

}); 

$('#spot.seven').click(function() { 
      // if($('.hide').hasClass('test')){ 

    $('#contentspot.seven').toggleClass('showcontent'); 

}); 

es die ganze Zeit erhalten, so wiederholt.

Ich bin mir sicher, dass es möglich ist, all diesen Code in 2 Zeilen zu machen, wenn jemand mir den Prozess erklären kann, um es zu verstehen, wäre es fantastisch!

Vielen Dank für Ihre Zeit.

Answer 1

Zuerst sollten Sie den @ empiric-Ratschlag nehmen und nur einmal pro Seite höchstens id verwenden. id sollte ein eindeutiges Attribut sein, das nicht wiederverwendet wird. Ich würde so etwas wie dieses, mit class Attribut für ähnliche Elemente

<div id="spots"> 

    <div class="spot" style="position: absolute; z-index: 103; width: 25px; height:25px;"> 
    <div class="ball"></div> 
    <div class="pulse"></div> 

    <div class="content"> 
     <img src="img/line-boost.png"> 
    </div> 
    </div> 

    <!-- more spots... --> 

</div> 

Dann können Sie schreiben Ihre jQuery-Funktion ausführen jederzeit ein Element mit class="spot" geklickt wird

<script> 
    $('#spots .spot').on('click', function() { 
    $(this) //this refers to the clicked element, our .spot 
     .find('.content') //select child elements with class 'content' 
     .toggleClass('showcontent'); 
    }); 
</script>