JavaScript不会更改附加内容

Question

因此，我创建了一些按钮，这些按钮必须在单击时显示不同的消息，但是当我单击一个按钮后，其他按钮也将显示相同的消息。 我还需要一些有关如何使我的网站的这一部分快速响应的提示。 以下是该部分在网站上的样子：

这是代码：https://jsfiddle.net/eLu2n6pj/1/

var counter = 0;

$("#tasto1").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);

  if (counter <= 0) {
    $(".testo").append('<b name="grassetto">Test 1');
    counter++;
  }
});

$(function() {
  $('#tasto1').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto2").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);
  if (counter <= 0) {

    $(".testo").append('Test 2');
    counter++;
  }
});

$(function() {
  $('#tasto2').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto3").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);
  if (counter <= 0) {

    $(".testo").append('Test 3');
    counter++;
  }
});

P {
  color: black;
}

#blocco {
  position: relative;
  top: 35px;
  border: 2px solid #555;
  padding: 20px;
  border-radius: 10px;
  opacity: 0;
}

button[type="button"] {
  margin-bottom: 4px;
  width: 270px;
}

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section class="feature-area relative pt-100 pb-20" name="infobox">
  <div class="overlay overlay-bg"></div>
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-4 col-md-6" name="asppi">
        <div class="single-feature" name="testo">
          <ul>
            <li>
              <button id="tasto1" type="button" class="btn btn-secondary" data-placement="right">
              Button 1
              </button>
            </li>
            <li>
              <button id="tasto2" type="button" class="btn btn-secondary" data-placement="right">
              Button 2
              </button>
            </li>
            <li>
              <button id="tasto3" type="button" class="btn btn-secondary" data-placement="right">
              Button 3
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div id="blocco" class="single-feature">
          <p class="testo"></p>
        </div>
      </div>
    </div>
  </div>
</section>

感谢您的帮助。

Answer 1

像这样更改.testo的内容，而不是附加

$(".testo").html('<b name="grassetto">Test 1');

此外，它仅在第一次尝试时起作用的原因是if-condition

if (counter <= 0) {

    //
}

摆脱掉它，并且效果很好

Answer 2

将您的JavaScript更改为此

 $("#tasto1").click(function() {
   $("#blocco").animate({
    'opacity': '1'
   }, 500);

    $(".testo").html('<b name="grassetto">Test 1');

});

$(function() {
   $('#tasto1').blur(function() {
     $('#blocco').animate({
       'opacity': '0'
      }, 500);
    });
 });

 $("#tasto2").click(function() {
    $("#blocco").animate({
    'opacity': '1'
    }, 500);

     $(".testo").html('Test 2');

   });

$(function() {
  $('#tasto2').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto3").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);

    $(".testo").html('Test 3');

 });

Answer 3

从概念上讲，如果必须替换HTML元素内部的HTML，请使用.html()。在必须附加到现有HTML元素末尾的情况下，请使用.append()。

在您的用例中，append的使用是不正确的，因为单击按钮后您将替换已分配了类testo的元素的内容。

如果将.append()替换为.html()，您的代码应该可以正常工作。

Answer 4

要正确地淡入/淡出文本，您需要执行以下操作，在不透明度为0的情况下更改文本，否则它将闪烁

通过animation，您可以通过插入这样的函数并嵌套它们来实现，而不必使用blur

.animate({
'opacity': '0'}, 500, function() {
  $(".testo").html('<b name="grassetto">Test 1');
})
.animate({
'opacity': '1'}, 500);

在下面的示例中，我改用.html()来分配新文本。

我还暂时删除了if (counter <= 0) {...}语句，因为目前尚不清楚要完成什么

堆栈片段

var counter = 0;

$("#tasto1").click(function() {
  $("#blocco")
    .animate({
    'opacity': '0'}, 500, function() {
      $(".testo").html('<b name="grassetto">Test 1');
    })
    .animate({
    'opacity': '1'}, 500);
  counter++;
});

$("#tasto2").click(function() {
  $("#blocco")
    .animate({
    'opacity': '0'}, 500, function() {
      $(".testo").html('<b name="grassetto">Test 2');
    })
    .animate({
    'opacity': '1'}, 500);
  counter++;
});

$("#tasto3").click(function() {
  $("#blocco")
    .animate({
    'opacity': '0'}, 500, function() {
      $(".testo").html('<b name="grassetto">Test 3');
    })
    .animate({
    'opacity': '1'}, 500);
  counter++;
});

P {
  color: black;
}

#blocco {
  position: relative;
  top: 35px;
  border: 2px solid #555;
  padding: 20px;
  border-radius: 10px;
  opacity: 0;
}

button[type="button"] {
  margin-bottom: 4px;
  width: 270px;
}

ul {
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section class="feature-area relative pt-100 pb-20" name="infobox">
  <div class="overlay overlay-bg"></div>
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-4 col-md-6" name="asppi">
        <div class="single-feature" name="testo">
          <ul>
            <li><button id="tasto1" type="button" class="btn btn-secondary" data-placement="right">
                                    Button 1
                                    </button></li>
            <li><button id="tasto2" type="button" class="btn btn-secondary" data-placement="right">
                                   Button 2
                                    </button></li>
            <li><button id="tasto3" type="button" class="btn btn-secondary" data-placement="right">
                                    Button 3
                                    </button></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div id="blocco" class="single-feature">
          <p class="testo"></p>
        </div>
      </div>
    </div>
  </div>
</section>