Question

我有以下代码，可以在显示价格的hide()和show()状态之间切换 button。我知道.toggle()在 jQuery 。但是在这个例子中我无法找到它的解决方法。当我点击button <p></p>元素附加到div中的 .msg 类时，当我再次点击它时，它会隐藏它状态，方法是删除DOM中的<p></p>元素（位于else块中）。

我设法提出了一个使用If..else效果很好的解决方案，但它感觉不对或是最好的方法。我觉得这个解决方案很天真，想知道我可以做些什么来进一步优化这段代码。

以下是代码：

＆＃13;

(function() {
  //$('.not-interested').hide();
  $('.msg').hide();

  var showPrice = function(e) {
    e.stopPropagation();

    var vacation = $(this).closest('.vacation');
    var button = vacation.find('button');
    if ((!vacation.hasClass('present'))) {
      var price = +vacation.data('price');
      var vacation_place = vacation.find('h3').text();
      var msg = $("<p style='text-align:center;line-height:24px;font-size:13px;'>Price for " + vacation_place + " is: " + (3 * price) + " </p>");
      vacation.find('.msg').prepend(msg).show();
      vacation.addClass('present');
    } else if ((e.type == 'click' && e.toElement.localName == 'button') || e.type == 'showAll') {

      //console.log(e.toElement.localName);
      //vacation.on('click','button')){
      //console.log(e.toElement);
      //console.log(vacation.on('click','button').context);
      //console.log(button);
      vacation.removeClass('present');
      vacation.find('.msg').hide().find('p').remove();
    }

  };

  var removePrice = function(e) {
    e.stopPropagation();
    var vacation = $(this).closest('.vacation');
    vacation.find('div.msg').hide();
    //vacation.on('click.price','button',showPrice);
  };

  $('.vacation').on('click.show', 'button', showPrice);
  $('.vacation').on('showAll.price', showPrice); // creating a custom event

  $('.show-all-price').on('click', function(e) {
    e.preventDefault();
    $('.vacation').trigger('showAll.price'); // firing a custom event on click of an anchor
  });
})();

＆＃13;

body,
ul {
  font-size: 100%;
  margin: 0;
  padding: 0;
  font-family: "sans-serif";
  color: #fff;
}
.show-all {
  width: 100px;
  background: #597C80;
  margin-top: 25px;
  margin-left: 25px;
  border: 1px solid #2A3F41;
}
.show-all a {
  display: block;
  text-decoration: none;
  color: #333;
  text-align: center;
  padding: 10px;
  font-size: 13px;
}
ul {
  list-style: none;
  margin-top: 20px;
  margin-left: 20px;
  float: left;
}
li {
  float: left;
  display: block;
  padding: 10px;
  background: #2A3F41;
  margin-right: 10px;
  padding-bottom: 25px;
}
li h3 {
  text-align: center;
}
li > div {
  width: 80%;
  margin: 0 auto;
}
li button {
  width: 100%;
  background: #377C37;
  color: #333;
  border: none;
  outline: 0;
  cursor: pointer;
  padding: 5px 9px;
}
button:active {
  position: relative;
  top: 2px;
  /* padding: 8px 13px 6px;*/
}
li a {
  display: block;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  color: #597C80;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<body>
  <div class="show-all">
    <a href="#" class="show-all-price">Show all</a>
  </div>
  <ul id="vacation-list">
    <li class="vacation" data-price="395">
      <h3>Hawaiian Vacation</h3>
      <div>
        <button>Show all prices</button>
        <div class="msg">
          <a href="#" class="not-interested">Not Interested</a>
        </div>
      </div>

    </li>
    <li class="vacation" data-price="315">
      <h3>American Vacation</h3>
      <div>
        <button>Show all prices</button>
        <div class="msg">
          <a href="#" class="not-interested">Not Interested</a>
        </div>
      </div>

    </li>
    <li class="vacation" data-price="420">
      <h3>French Vacation</h3>
      <div>
        <button>Show all prices</button>
        <div class="msg">
          <a href="#" class="not-interested">Not Interested</a>
        </div>
      </div>

    </li>
  </ul>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="js/app.js"></script>
</body>

＆＃13;

我还尝试使用名称间距.on()和.off()，但无法确定如何正确使用。

以下是.on()和.off()切换的代码：

(function(){
//$('.not-interested').hide();
$('.msg').hide();

var showPrice = function(e){
    e.stopPropagation();

    var vacation = $(this).closest('.vacation');
    var button = vacation.find('button');

    var price = +vacation.data('price');
    var vacation_place = vacation.find('h3').text();
    var msg = $("<p style='text-align:center;line-height:24px;font-size:13px;'>Price for " + vacation_place + " is: " + (3 * price) + " </p>");
    vacation.find('.msg').prepend(msg).show();

    vacation.on('click.remove','button',removePrice);

};

   var removePrice = function(e){
     e.stopPropagation();
     var vacation = $(this).closest('.vacation');
     vacation.find('div.msg').hide().find('p').remove();
     vacation.on('click.price','button',showPrice);
   };

   $('.vacation').on('click.price','button',showPrice);
   $('.vacation').on('showAll.price',showPrice); // creating a custom event

   $('.show-all-price').on('click',function(e){
     e.preventDefault();
     $('.vacation').trigger('showAll.price'); // firing a custom event on click of an anchor
   });
})();

注意：，e.toElement.localName == 'button'无法在 IE 中使用。

提前致谢。

在jQuery中切换show（）和hide（）状态的最佳方法

0 个答案: