Question

下面的代码显示div .items，当点击带有“add Item”的文件“addItems”的链接时。但是当div .items出现时，我想要将链接的文本从“添加项目”更改为“隐藏”。当点击带有“隐藏”文字的链接时，我想隐藏div .items并将链接文本从“隐藏”更改为“添加项目”。

但它不起作用，当点击“隐藏”时，文字不会改变。

你知道如何解决这个问题吗？

HTML

<form method="post" class="clearfix">
    <div class="form-group">
        <a href="" id="addItems">Add Item</a>
    </div>
    <div class="items">
        <h6>Items</h6>
        <div class="form-group">
            <label for="inputName">Title</label>
            <input type="text" class="form-control" id="inputName">
        </div>
        <input type="submit" class="btn mt-3"/>
    </div>
</form>

CSS

.items {
    display: none;
}

JS

$('#addItems').click(function(e) {
    e.preventDefault();
    $('.items').show("slide");
    $('#addItems').text("Hide");
});

$('#addItems').click(function(e) {
    if($('#addItems').text() == "Hide"){
        $('#addItems').text("Add Item");
    }
    else {
        $('#addItems').text("Hide");
    }
 });

Answer 1

您正在将两个点击事件监听器设置在一起，这意味着您正在尝试同时执行这两项操作。

将您的代码移动到一个事件监听器中，然后根据您需要的功能处理所需的逻辑。

$("#addItems").click(function(e) {
  e.preventDefault();
  $(".items").show("slide");
  if ($("#addItems").text() == "Hide") {
    $("#addItems").text("Add Item");
  } else {
    $("#addItems").text("Hide");
  }
});

Answer 2

您可以使用单个侦听器实现此目的，如下所示：

$('#addItems').click(function(e) {
    e.preventDefault();

    var $btn = $(this);

    if ($btn.text() == "Hide") {
        $('.items').show("slide");
        $btn.text("Add Item");
    } else{
        $('.items').hide("slide");
        $btn.text("Hide");
    }
});

Answer 3

您将click方法绑定到同一个元素两次，您可以用更短的代码执行此操作，请参阅下面的

＆＃13;

$('#addItems').on('click', function(e) {
  e.preventDefault();

  let elem = $(this);

  $('.items').slideToggle(200, function() {

    if ($(this).is(':visible')) {

      $(elem).text("Hide");

    } else {

      $(elem).text("Add Item");

    }
  });

});

＆＃13;

.items {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" class="clearfix">
  <div class="form-group">
    <a href="" id="addItems">Add Item</a>
  </div>
  <div class="items">
    <h6>Items</h6>
    <div class="form-group">
      <label for="inputName">Title</label>
      <input type="text" class="form-control" id="inputName">
    </div>
    <input type="submit" class="btn mt-3" />
  </div>
</form>

＆＃13;

在链接点击上显示div和更改文本无法正常工作

3 个答案: