如何写“ this”-函数

Question

我写了很多复杂的东西。 我想减少我的Javascript代码，也许使用变量或“ this”？它的代码太多，只是出于一点意图。也许有些人可以帮助我。

$("#Linkitem1").click(function(){   $("#item1").fadeIn(2500);  
$("#item2").hide();   $("#item3").hide();  
$("#Linkitem3").removeClass("active btn-warning");  
$("#Linkitem2").removeClass("active btn-warning");  
$("#Linkitem1").addClass("active btn-warning");

});


$("#Linkitem2").click(function(){   $("#item2").fadeIn(2500);  
$("#item1").hide();   $("#item3").hide();  
$("#Linkitem1").removeClass("active btn-warning");  
$("#Linkitem3").removeClass("active btn-warning");  
$("#Linkitem2").addClass("active btn-warning");

});


$("#Linkitem3").click(function(){   $("#item3").fadeIn(2500);  
$("#item2").hide();   $("#item1").hide();  
$("#Linkitem1").removeClass("active btn-warning");  
$("#Linkitem2").removeClass("active btn-warning");  
$("#Linkitem3").addClass("active btn-warning");


});

这是我的html代码

<main role="main">
   <div id="card-content" class="container">
     <div class="card border-warning text-center">
        <div class="card-header">
            <ul class="nav nav-pills card-header-pills">
              <li class="nav-item">
                <a id="Linkitem1" data-toggle="collapse" href="#item1" role="button"  aria-expanded="true" aria-controls="collapseOne" title="" class="nav-link text-white btn-warning active">item1</a>
                </li>
                <li class="nav-item">
                  <a id="Linkitem2" data-toggle="collapse" href="#item2" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item2</a>
                </li>
                <li class="nav-item">
                  <a id="Linkitem3" data-toggle="collapse" href="#item3" role="button" aria-expanded="true" title="" class="nav-link collapsed text-white">item3</a>
                </li>
              </ul>
            </div>

            <!--Content item1-->
            <div id="item1" class="animated fadeIn collapse show card-body"  data-parent="#card-content">
              <h5 class="card-title">title for item 1</h5>
              <p class="card-text">content item 1.</p>
            </div>

            <!--content item 2-->
            <div id="item2" class="animated fadeIn collapse card-body"  data-parent="#card-content">
                <h5 class="card-title">title item 2</h5>
                <p class="card-text">content item 2</p>

              <!--content 3-->
              <div id="item 3" class="collapse card-body"data-parent="#card-content">
                <h5 class="card-title">title item 3</h5>
                <p class="card-text">content item 3</p>
          </div>
        </div>
    </main>

此代码有效。我在linkitem1的导航中单击，并且在卡体内只是项目1的内容。如果在linkitem2上单击，我可以看到item2的内容。我认为我必须使用“ this”，但是我并不擅长。所以很高兴您的回答

Erya

Answer 1

如果可能，您可以使用这种方式。只需添加data attribute和每个元素

$(".Linkitem").click(function(){   
let dataId = $(this).attr('data-id');
$('.item[data-id='+dataId+']').fadeIn(500);
$('.item:not([data-id='+dataId+'])').fadeOut(500);

$('.Linkitem[data-id='+dataId+']').addClass("active btn-warning");
$('.Linkitem:not([data-id='+dataId+'])').removeClass("active btn-warning");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button class="Linkitem" data-id="1" >One</button>
<button class="Linkitem" data-id="2" >Two</button>
<button class="Linkitem" data-id="3" >Three</button>

<ul>
<li class="item" data-id="1">Item 1</li>
<li class="item" data-id="2">Item 2</li>
<li class="item" data-id="3">Item 3</li>
</ul>