如何编写“ 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");


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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的内容。

Answer 1

如果可以的话，您可以使用这种方式。添加带有 nav-item 锚标记的类“ Linkitem” 并添加带有内容项的类“ item”

$(".Linkitem").click(function(){   
let dataId = $(".Linkitem").index(this);
$('.item:eq('+dataId+')').fadeIn(500);
$('.item:not(:eq('+dataId+'))').fadeOut(500);

$('.Linkitem:eq('+dataId+')').addClass("active btn-warning");
$('.Linkitem:not(:eq('+dataId+'))').removeClass("active btn-warning");

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<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" class="Linkitem" 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" class="Linkitem" 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" class="Linkitem" 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="item 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="item 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>
</div>
        <!--content 3-->
        <div id="item3" class="item 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>

Answer 2

您可以应用for循环，但是需要在id上更改属性class。否则，您应该使用其他属性，例如data-。

$(()=>{

  $(".item").each(function(){
      $(this).hide();
  });
          
  for (let i = 0; i < 3; i++){

      $(".Linkitem").eq(i).click(function(){
          $(".item").each(function(){
              $(this).hide();
          });
          $(".item").eq(i).fadeIn(2500); 

          $(".Linkitem").each(function(){
              $(this).removeClass("active btn-warning");
          });
          $(this).addClass("active btn-warning");  
      });
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class='Linkitem otherclass'>Linkitem11111111</a> <br>
<a class='Linkitem otherclass'>Linkitem22222222</a> <br>
<a class='Linkitem otherclass'>Linkitem33333333</a> <br>

<br><br><br>
<div class='item other'>1 1 1 1 1 1 1</div>
<div class='item other'>2 2 2 2 2 2 2</div>
<div class='item other'>3 3 3 3 3 3 3</div>
   

Answer 3

这是一个使用event.target而不是this（或$(this)）的解决方案。
JQuery仍用于.fadeIn和.hide，尽管也可以不用JQuery来完成。

点击监听器可区分“链接”按钮的点击和所有其他点击，并循环遍历item div，将其隐藏并仅显示“活动”的div。

// Calls `changeActiveItem` when something is clicked
document.addEventListener("click", changeActiveItem);

// Defines a listener (with automatic access to the triggering event)
function changeActiveItem(event){
  const clickedElement = event.target; // `target` property holds the clicked element

  // Makes sure the clicked element is a link before proceeding
  if(!clickedElement.classList.contains("link")){
    return; // Function will stop here if a non-link element was clicked
  }   

  // Gets the item id stored in the link's "data-linked-item-id" attribute
  const linkedItemId = clickedElement.dataset["linkedItemId"]; // Magic name conversion

  // Deactivates and hides all items
  const items = document.getElementsByClassName("item");
  for(let item of items){
    item.classList.remove("active");
    item.classList.remove("btn-warning"); // This class currently has no effect
    $(item).hide(); // Hides item

    // Activates and animates the selected item
    if(item.id === linkedItemId){
      $(item).fadeIn(2500);
      item.classList.add("active");
      item.classList.add("btn-warning");
    }
  }
}

div{ margin-bottom: 15px; }
.item{ display: none; font-size: 3em; }
.active{ display: block; color: darkred; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="item1Link" class="link" data-linked-item-id="item1">activate item 1</button>
<div>
  <div id="item1" class="item active">Item 1</div>
</div>
<button id="item2Link" class="link" data-linked-item-id="item2">activate item 2</button>
<div>
  <div id="item2" class="item">Item 2</div>
</div>
<button id="item3Link" class="link" data-linked-item-id="item3">activate item 3</button>
<div>
  <div id="item3" class="item">Item 3</div>
</div>