javascript - 如果 HTML 文本等于值，则单击更改

Question

好吧，我已经尝试了几种方法来做到这一点，但没有任何效果。我希望这里有人可以告诉我我做错了什么。以下是我要实现的目标的分步说明。

#info-NUMBER-btn 显示点击显示更多信息。
#info-NUMBER CSS 设置为 display: none。

当 #info-NUMBER-btn 被点击时:
- 对应#info-NUMBER-btn显示点击显示较少信息。
- 相应的 #info-NUMBER CSS 设置为 display: inline-block。

/* Jquery */

$(document).ready(function() {
    	$("#info-1-btn").text("Click to display more information");
    	$("#info-2-btn").text("Click to display more information");
    	$("#info-3-btn").text("Click to display more information");
    	$("#info-4-btn").text("Click to display more information");
    	$("#info-5-btn").text("Click to display more information");
    	
    	if($("#info-1-btn").text("Click to display more information")) {
    		$("#info-1-btn").click(function () {
    			$(this).text("Click to display less information");
    			$("#info-1").css("display", "inline-block");
    		});
    	} else if($("#info-1").text("Click to display less information")) {
    		$("#info-1-btn").click(function() {
    			$(this).text("Click to display more information");
    			$("#info-1").css("display", "none");
    		});
    	}
    	
    	
    	if($("#info-2-btn").text("Click to display more information")) {
    		$("#info-2-btn").click(function () {
    			$(this).text("Click to display less information");
    			$("#info-2").css("display", "inline-block");
    		});
    	} else {
    		$("#info-2-btn").click(function() {
    			$(this).text("Click to display more information");
    			$("#info-2").css("display", "none");
    		});
    	}
    	
    	
    	if($("#info-5-btn").text("Click to display more information")) {
    		$("#info-5-btn").click(function () {
    			$(this).text("Click to display less information");
    			$("#info-5").css("display", "inline-block");
    		});
    	} else {
    		$("#info-5-btn").click(function() {
    			$(this).text("Click to display more information");
    			$("#info-5").css("display", "none");
    		});
    	}
    }); 

<!-- HTML -->
<div id="info-5" class="hire-equipment-more-information">
  <table class="hire-equipment-more-information-table" cellpadding="15px">
    <tr>
      <th>Length:</th>
      <th>Material:</th>
      <th>HP:</th>
    </tr>
    <tr>
      <td>7.5m</td>
      <td>Aluminium</td>
      <td>225</td>
    </tr>
  </table>
</div>
<br />
<a id="info-5-btn" class="hire-equipment-item-link"></a>

Answer 1

您可以通过不绑定(bind)到元素 ID，而是使用您的类 hire-equipment 来使它变得更容易。

这样您就不必绑定(bind)到本质上执行相同操作的 5 个不同按钮。

点击事件处理程序后，您可以使用该函数的第一个参数来检查您来自哪个按钮并采取适当的操作。

例如，我刚刚创建了 5 个元素和 1 个事件处理程序。

$(selector).click() 将绑定(bind)到共享选择器的所有元素(在我的例子中是 hire-equipment)，然后，它将检查它是哪个按钮，选择父节点(按钮、标题和描述周围的 div)，搜索描述元素，并切换它的隐藏类。然后按钮文本将根据它的文本而改变。

这不完全是您的示例的构建方式，但它是使您的事件处理程序更通用的示例。

$('.hire-equipment').click(function(event) {
  var sourceElement = $(event.target);
  $(sourceElement).parent().find('.description').toggleClass('hidden');
  if ($(sourceElement).text() === 'Show more information') {
    $(sourceElement).text('Show less information');
  } else {
    $(sourceElement).text('Show more information');
  }
});

.hidden {
  display: none;
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>
<div>
  <p class="title">Title of item</p>
  <div class="description hidden">This is a description</div>
  <button type="button" class="hire-equipment">Show more information</button>
</div>