Fatal编程技术网
  • javascript/
  • Javascript 如果HTML文本等于值，请单击“更改”

Javascript 如果HTML文本等于值，请单击“更改”

javascript jquery html css

Javascript 如果HTML文本等于值，请单击“更改”,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好吧，我试过几种方法，但都不管用。我希望这里有人能告诉我我做错了什么。下面是我试图实现的目标的一步一步 信息编号btn显示单击以显示更多信息。 信息编号CSS设置为显示：无 单击信息编号btn时： -相应的信息编号btn显示单击以显示较少的信息。 -相应的信息编号CSS设置为显示：内联块 /*Jquery*/ $document.readyfunction{ $info-1-btn.text单击以显示更多信息； $info-2-btn.text单击以显示更多信息； $info-3-btn.te

好吧，我试过几种方法，但都不管用。我希望这里有人能告诉我我做错了什么。下面是我试图实现的目标的一步一步

信息编号btn显示单击以显示更多信息。 信息编号CSS设置为显示：无

单击信息编号btn时： -相应的信息编号btn显示单击以显示较少的信息。 -相应的信息编号CSS设置为显示：内联块

/*Jquery*/ $document.readyfunction{ $info-1-btn.text单击以显示更多信息； $info-2-btn.text单击以显示更多信息； $info-3-btn.text单击以显示更多信息； $info-4-btn.text单击以显示更多信息； $info-5-btn.text单击可显示更多信息； 如果$info-1-btn.text，请单击以显示更多信息{ $info-1-btn.clickfunction{ $this.text单击以显示较少的信息； $info-1.css显示，内联块； }; }否则，如果$info-1.text，请单击以显示较少的信息{ $info-1-btn.clickfunction{ $this.text单击以显示更多信息； $info-1.css显示，无； }; } 如果$info-2-btn.text，请单击以显示更多信息{ $info-2-btn.clickfunction{ $this.text单击以显示较少的信息； $info-2.css显示，内联块； }; }否则{ $info-2-btn.clickfunction{ $this.text单击以显示更多信息； $info-2.css显示，无； }; } 如果$info-5-btn.text，请单击以显示更多信息{ $info-5-btn.clickfunction{ $this.text单击以显示较少的信息； $info-5.css显示，内联块； }; }否则{ $info-5-btn.clickfunction{ $this.text单击以显示更多信息； $info-5.css显示，无； }; } }; 长度： 材料： 惠普： 7.5米 铝 225
让我们检查这行代码

if($("#info-1-btn").text("Click to display more information")) {
这应该是：

if($("#info-1-btn").text() === "Click to display more information")) {
文本函数是一个重载函数。如果不传入任何值，它将返回元素中的文本

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

现在让我们看看你的总体逻辑

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

请参阅此完整的代码示例：

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

它还演示了如何使用自定义属性（在本例中为数据目标）将按钮链接到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>
让我们检查这行代码

if($("#info-1-btn").text("Click to display more information")) {
这应该是：

if($("#info-1-btn").text() === "Click to display more information")) {
文本函数是一个重载函数。如果不传入任何值，它将返回元素中的文本

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

现在让我们看看你的总体逻辑

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

请参阅此完整的代码示例：

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

它还演示了如何使用自定义属性（在本例中为数据目标）将按钮链接到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>
通过不绑定到元素id，而是使用类租用设备，您可以让自己变得更容易

这样，您就不必绑定到5个不同的按钮，它们本质上做相同的事情

一旦点击eventHandler，就可以使用函数的第一个参数来检查要从哪个按钮开始并采取适当的操作

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

$selector.click将绑定到my case hire equipment中共享选择器的所有元素，然后，它将检查来自哪个按钮，选择父节点按钮周围的div、标题和描述，搜索描述元素，并切换其隐藏类。然后，按钮文本将根据其文本进行更改

这并不完全是如何构建示例的，但它是使事件处理程序更通用的示例

$“.租用设备”。单击功能事件{ var sourceElement=$event.target； $sourceElement.parent.find'.description'.toggleClass'hidden'； 如果$sourceElement.text=='显示更多信息'{ $sourceElement.text“显示较少的信息”； }否则{ $sourceElement.text“显示更多信息”； } }; .隐藏{ 显示：无； 可见性：隐藏； }

基于元素的文本内容的事件。相反，请听单击事件，然后确定要执行的操作。可以使用存储内容切换状态的隐藏变量或数据属性来确定操作。@Terry这可能是一个愚蠢的问题，但我对此还是很陌生。如何添加存储切换状态的数据属性？您应该在click eventhandler中执行if语句，而不是现在这样做。另外，通过执行$'id'.text'text'可以设置元素的文本。我建议您回到基础上来……您不应该基于元素的文本内容绑定单击事件。相反，请听单击事件，然后确定要执行的操作。可以使用存储内容切换状态的隐藏变量或数据属性来确定操作。@Terry这可能是一个愚蠢的问题，但我对此还是很陌生。我该如何添加一个存储切换状态的数据属性？还有很多可以更改的。。。就像在if语句中附加click处理程序一样？单击时，它似乎可以正确显示，但再次单击时，它不会更改显示CSS@Jesse：这是由于您如何将代码连接到单击处理程序。对此，我在回答中添加了更多内容。@AndrewShepherd我喜欢你简单易行的方法，但是我如何查找.hire设备的更多信息，并将其显示更改为内联块，然后使用相应的按钮返回？@Jesse-你可以通过自定义属性将每个按钮链接到一个div来完成此操作。我已经修改了我的例子。还有很多可以改变的。。。就像在if语句中附加click处理程序一样？单击时，它似乎可以正确显示，但再次单击时，它不会更改显示CSS@Jesse：这是由于您如何将代码连接到单击处理程序。对此，我在回答中添加了更多内容。@AndrewShepherd我喜欢你简单易行的方法，但是我如何查找.hire设备的更多信息，并将其显示更改为内联块，然后使用相应的按钮返回？@Jesse-你可以通过自定义属性将每个按钮链接到一个div来完成此操作。我修改了我的例子。