Question

好的，我尝试了几种方法，但没有任何效果。我希望有人能告诉我我做错了什么。以下是我想要实现的一步一步。

#info-NUMBER-btn显示Click to display more information #info-NUMBER CSS设置为display: none。

点击#info-NUMBER-btn时：
- 相应的#info-NUMBER-btn显示Click to display less information - 相应的#info-NUMBER CSS设置为display: inline-block。

＆＃13;

/* 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");
    		});
    	}
    });

＆＃13;

<!-- 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>

＆＃13;

Answer 1

您可以通过不绑定元素ID来使自己变得更容易，而是使用您的课程hire-equipment。

这样你就不必绑定到5个不同的按钮，这些按钮本质上是做同样的事情。

一旦你点击了eventHandler，就可以使用该函数的第一个参数来检查你来自哪个按钮并采取适当的行动。

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

$(selector).click()将绑定到共享选择器的所有元素（在我的情况下为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>

Answer 2

让我们检查一下这行代码

if($("#info-1-btn").text("Click to display more information")) {

这应该是：

if($("#info-1-btn").text() === "Click to display more information")) {

text函数是一个重载函数。如果您没有传入任何值，它将返回元素内的文本。

如果传入一个值，它将修改文本，并再次返回jQuery对象（这将是一个真值）。

现在让我们来看看你的整体逻辑。

当文档加载时，您的代码正在测试按钮的状态一次。它应该测试按钮的状态作为点击处理程序的一部分。

请参阅此完整的代码示例：http://plnkr.co/edit/HLsLcKrRY3OqK6w44bXp?p=preview

它可能不完全符合您的要求，但它演示了如何在单击处理程序中测试按钮的状态。

它还演示了如何使用自定义属性（在本例中为data-target）将按钮链接到div块。

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
</head>

<body>
  <button class="toggleButton" data-target="buttonOneInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonOneInfo">
    Here's some information about the first item
  </div>
  <button class="toggleButton" data-target="buttonTwoInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonTwoInfo">
    Here's some information about the second item
  </div>
  <button class="toggleButton" data-target="buttonThreeInfo"></button>
  <br />
  <div class="toggleTarget" id="buttonThreeInfo">
    Here's some information about the third item
  </div>


</body>

<script type="text/javascript">
  $(function() {
    $('.toggleTarget').hide();
    $(".toggleButton")
      .text("Click to display more information")
      .click(function() {
        var toggleTargetId = $(this).attr('data-target');
        var toggleTarget = $(document.getElementById(toggleTargetId));

        if ($(this).text() === 'Click to display more information') {
          $(this).text('Click to display less information');
          toggleTarget.show();
        } else {
          $(this).text('Click to display more information');
          toggleTarget.hide();
        }
      });
  });
</script>

</html>

Answer 3

修剪了OP的jQuery。以下大致概述了以下程序：

使用的主要方法是toggleClass()
至少需要2个班级才能表明状态为.info-btn
使用类的一大优势是，您可以为每个类添加更多样式，以增强.info-btn的状态。恩。 color，background-color

更多详细信息在以下代码段的来源中进行了评论：

段

/* jQuery */

// Alternate styntax for $(document).ready(
$(function() {

  // Click on ANYTHING with the class .info-btn
  $(".info-btn").on("click", function(e) {

    // Prevent .info-btn from jumping when clicked
    e.preventDefault();

    /* `this` or .info-btn will toggle between the 
    | classes of .more and .less
    | See CSS for details of expected behavior of
    | .info-btn in both states
    */
    $(this).toggleClass('more less');
  });
});

.info-btn {
  cursor: pointer;
}
/* Both classes use the :after pseudo-selector
| The value of content will complete the 
| string: "Click to display"...
*/

a.more:after {
  content: ' more information';
}
a.less:after {
  content: ' less information';
}
button.less:before {
  content: 'less ';
}
button.less:after {
  content: ' more';
}
button.more:before {
  content: 'more ';
}
button.more:after {
  content: ' less';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- HTML -->
<div id="info-5" class="rental-info">
  <table class="rental-info-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 class="info-btn rental-link more">Click to display</a>
<br/>
<button class='info-btn less'>is</button>
<br/>

如果HTML文本等于值，则onclick更改

3 个答案:

段