文章/答案/技术大牛

发布

社区首页 >问答首页 >如果HTML文本等于值，则单击“更改”

问如果HTML文本等于值，则单击“更改”
EN

Stack Overflow用户

提问于 2016-10-02 10:14:36

回答 3查看 2.4K关注 0票数 1

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

#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。

/* 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>

javascript

jquery

html

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-10-02 10:19:08

让我们检查这一行代码。

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>

票数 1

Stack Overflow用户

发布于 2016-10-02 10:35:31

通过不是绑定到元素id，而是使用类hire-equipment，您可以使它对自己来说容易得多。

这样，您就不必绑定到5个不同的按钮，这些按钮在本质上都是一样的。

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

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

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

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

$('.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>

票数 3

Stack Overflow用户

发布于 2016-10-02 11:44:08

去掉OP's jQuery的脂肪。以下程序大致概述如下：

主要使用的方法是toggleClass()
至少需要两个类来指示.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/>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39815945

复制

相似问题

问如果HTML文本等于值，则单击“更改”
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果HTML文本等于值，则单击“更改”EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如果HTML文本等于值，则单击“更改”
EN