jQueryのは、ターゲットのdivにクラスを追加し、私が欲しいもしたい対象のdivその間にクラス</strong>を追加<strong>に<strong>異なるリンク</strong>とそれに基づいてをクリックしようとしている他のdivセクション

Question

から削除します他のdivセクションから新しいクラスを削除しました。私は '[データ-でgetTarget〜= "1"]'

ハイパーリンクを取得し、によって異なるのdivをターゲットとするために、ここで'[データ-でgetTarget〜= "1"]'を使用してい

このコードは動作していますが、これはより良い方法で作成できると感じています。

$(document).ready(function(){ 
 

 
\t //var targetID = document.getElementsByClassName("stickyCalc"); 
 
    
 
\t $('[data-getTarget~="one"]').click(function() {  
 
    $("[id^='one']").addClass("mySpaceClass"); 
 
    $("[id^='two']").removeClass("mySpaceClass"); 
 
    $("[id^='three']").removeClass("mySpaceClass"); 
 
    $("[id^='four']").removeClass("mySpaceClass"); 
 
    $("[id^='five']").removeClass("mySpaceClass"); 
 
    }); 
 
    
 
    $('[data-getTarget~="two"]').click(function() {  
 
    $("[id^='one']").removeClass("mySpaceClass"); 
 
    $("[id^='two']").addClass("mySpaceClass"); 
 
    $("[id^='three']").removeClass("mySpaceClass"); 
 
    $("[id^='four']").removeClass("mySpaceClass"); 
 
    $("[id^='five']").removeClass("mySpaceClass"); 
 
    }); 
 
    
 
    $('[data-getTarget~="three"]').click(function() {  
 
    $("[id^='one']").removeClass("mySpaceClass"); 
 
    $("[id^='two']").removeClass("mySpaceClass"); 
 
    $("[id^='three']").addClass("mySpaceClass"); 
 
    $("[id^='four']").removeClass("mySpaceClass"); 
 
    $("[id^='five']").removeClass("mySpaceClass"); 
 
    }); 
 
    
 
    $('[data-getTarget~="four"]').click(function() {  
 
    $("[id^='one']").removeClass("mySpaceClass"); 
 
    $("[id^='two']").removeClass("mySpaceClass"); 
 
    $("[id^='three']").removeClass("mySpaceClass"); 
 
    $("[id^='four']").addClass("mySpaceClass"); 
 
    $("[id^='five']").removeClass("mySpaceClass"); 
 
    }); 
 
    
 
    $('[data-getTarget~="five"]').click(function() {  
 
    $("[id^='one']").removeClass("mySpaceClass"); 
 
    $("[id^='two']").removeClass("mySpaceClass"); 
 
    $("[id^='three']").removeClass("mySpaceClass"); 
 
    $("[id^='four']").removeClass("mySpaceClass"); 
 
    $("[id^='five']").addClass("mySpaceClass"); 
 
    }); 
 

 
});

.mySpaceClass{ 
 
    margin:20px 0; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="stickyCalc"> 
 
<a href="#" data-getTarget="one"> One </a> | 
 
<a href="#" data-getTarget="two"> Two </a> | 
 
<a href="#" data-getTarget="three"> Three </a> | 
 
<a href="#" data-getTarget="four"> Four </a> | 
 
<a href="#" data-getTarget="five"> Five </a> 
 
</div> 
 

 

 
<hr> 
 

 
<div id="one" style="background:green; padding:20px; color:white"> 
 
Headline 1 
 
</div> 
 

 
<div id="two" style="background:pink; padding:20px; color:white"> 
 
Headline 2 
 
</div> 
 

 
<div id="three" style="background:red; padding:20px; color:white"> 
 
Headline 3 
 
</div> 
 

 
<div id="four" style="background:black; padding:20px; color:white"> 
 
Headline 4 
 
</div> 
 

 
<div id="five" style="background:blue; padding:20px; color:white"> 
 
Headline 5 
 
</div>

Answer 1

あなたが見出しのコンテナのdivを追加する場合はこのようにそれを実行することができます。

$(document).ready(function(){ 
 

 
    $('.stickyCalc a').click(function() { 
 

 
    $('#HeadlineContainer div').removeClass('mySpaceClass'); 
 
    $('#' + this.getAttribute('data-gettarget')).addClass("mySpaceClass") 
 

 
    }); 
 

 
});

.mySpaceClass{ 
 
    margin:20px 0; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<div class="stickyCalc"> 
 
<a href="#" data-getTarget="one"> One </a> | 
 
<a href="#" data-getTarget="two"> Two </a> | 
 
<a href="#" data-getTarget="three"> Three </a> | 
 
<a href="#" data-getTarget="four"> Four </a> | 
 
<a href="#" data-getTarget="five"> Five </a> 
 
</div> 
 

 

 
<hr> 
 
    <div id="HeadlineContainer"> 
 
<div id="one" style="background:green; padding:20px; color:white"> 
 
Headline 1 
 
</div> 
 

 
<div id="two" style="background:pink; padding:20px; color:white"> 
 
Headline 2 
 
</div> 
 

 
<div id="three" style="background:red; padding:20px; color:white"> 
 
Headline 3 
 
</div> 
 

 
<div id="four" style="background:black; padding:20px; color:white"> 
 
Headline 4 
 
</div> 
 

 
<div id="five" style="background:blue; padding:20px; color:white"> 
 
Headline 5 
 
</div> 
 
    </div>

Answer 2

あなたに怒鳴るすべてのターゲットのdivに新しいクラスを追加することができます -

-

<div class="stickyCalc"> 
<a href="#" data-getTarget="one"> One </a> | 
<a href="#" data-getTarget="two"> Two </a> | 
<a href="#" data-getTarget="three"> Three </a> | 
<a href="#" data-getTarget="four"> Four </a> | 
<a href="#" data-getTarget="five"> Five </a> 
</div> 


<hr> 

<div class="target" id="one" style="background:green; padding:20px; color:white"> 
Headline 1 
</div> 

<div class="target" id="two" style="background:pink; padding:20px; color:white"> 
Headline 2 
</div> 

<div class="target" id="three" style="background:red; padding:20px; color:white"> 
Headline 3 
</div> 

<div class="target" id="four" style="background:black; padding:20px; color:white"> 
Headline 4 
</div> 

<div class="target" id="five" style="background:blue; padding:20px; color:white"> 
Headline 5 
</div> 

次に、あなたが必要な慣習性を達成するためのjsのコードの下に使用することができます

$(document).ready(function(){ 

    //var targetID = document.getElementsByClassName("stickyCalc"); 
    $(".stickyCalc a").click(function(){ 

    $(".target").removeClass("mySpaceClass"); 
    var a =$(this).attr("data-getTarget"); 

    $("#"+a).addClass("mySpaceClass"); 
    }); 


});