jQuery基于不同的超链接单击，将类添加到目标div并从其他div部分中删除

Question

我试图点击不同的链接，并根据想要在目标div上添加一个类，同时也想从其他div部分删除添加的新类。

我在这里使用'[data-getTarget~ =“one”]'获取超链接并通过'[data-getTarget~ =“one”]'定位不同的div

这段代码正在运行，但我觉得这可以用更好的方式创建。

$(document).ready(function(){

	//var targetID = document.getElementsByClassName("stickyCalc");
  
	$('[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");
  });


});