jQuery的切換追加刪除

Question

這是帶有子菜單的菜單。 我需要在單擊子菜單項時，在菜單項“每天”旁邊切換子菜單文本。 就像下面的圖片

 (function($) { $(".menu .sub-menu li a").each(function() { var dayName = $(this).text(); $(this).on("click", function() { $(this).closest(".menu").children("li").children("a").append('<span class="day-name">' + dayName + '</span>'); }); }); })(jQuery); 

 ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } .menu > li { position: relative; } .menu > li > a { background-color: #eee; color: #333; display: inline-block; padding: 10px 20px; } .menu li:hover > .sub-menu { opacity: 1; visibility: visible; } .menu .sub-menu { position: absolute; left: 0; background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s; } .menu .sub-menu li { } .menu .sub-menu li a { color: #777; display: block; padding: 5px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class="menu"> <li> <a href="#">Everyday</a> <ul class="sub-menu"> <li><a href="#">Sat</a></li> <li><a href="#">Sun</a></li> <li><a href="#">Mon</a></li> <li><a href="#">Tue</a></li> <li><a href="#">Wed</a></li> <li><a href="#">Thu</a></li> <li><a href="#">Fri</a></li> </ul> </li> </ul> 

這是我正在嘗試的方法，但是不起作用。

Answer 1

您可以將Javascript的join和jQuery的hasClass和toggleClass方法與on('click')事件一起使用，如下所示：

見jsFiddle

或查看下面的代碼段：

 $(function() { $('.menu .sub-menu li a').on('click', function(e) { $(this).toggleClass('selected'); var txt = $('#title').text(); var total_len = $('.menu .sub-menu li').length; var count = 0; var values = []; $('.menu .sub-menu li a.selected').each(function(i) { values.push($(this).text()); count++; }); if(count == total_len) { txt = "Every Day"; } else { txt = "Every " + values.join(','); } $('#title').text(txt); }); }) 

 ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } .menu > li { position: relative; } .menu > li > a { background-color: #eee; color: #333; display: inline-block; padding: 10px 20px; } .menu li:hover > .sub-menu { opacity: 1; visibility: visible; } .menu .sub-menu { position: absolute; left: 0; background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s; } .menu .sub-menu li { } .menu .sub-menu li a { color: #777; display: block; padding: 5px 10px; } .menu .sub-menu li a.selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class="menu"> <li> <a id="title" href="#">Every </a> <ul class="sub-menu"> <li><a href="#">Sat</a></li> <li><a href="#">Sun</a></li> <li><a href="#">Mon</a></li> <li><a href="#">Tue</a></li> <li><a href="#">Wed</a></li> <li><a href="#">Thu</a></li> <li><a href="#">Fri</a></li> </ul> </li> </ul> 

Answer 2

檢查這個小提琴 。

如下更改JS，然后將時間表類添加到“每天”錨點。

(function($) {
  var currentValue = [];

  function renderValue(){
       var content = "Everyday ";

       $('.schedule').text(content + currentValue.join(' '));
  }    

  $(".menu .sub-menu li a").each(function() {
      var dayName = $(this).text();
      $(this).on("click", function() {
          var el = $(this),
            id = el.attr('data-id');

          currentValue[id] = currentValue[id] ? undefined : el.text();
          renderValue();
      });
  });

})(jQuery);

Answer 3

 (function($) { $(".menu .sub-menu li a").on("click", function() { var $this = $(this); if (this.hasAttribute("data-selected")) { $this.removeAttr("data-selected"); } else { $this.attr("data-selected", 'true'); } $this.closest(".menu").find(" > li > a").html(fillButton); }); function fillButton() { var options = $(this).next(".sub-menu").find("li a"); if (options.filter("[data-selected]").length > 0) { if (options.length === options.filter("[data-selected]").length) { return "Every day"; } else { var html = "Every "; options.filter("[data-selected]").each(function(i, el) { html += (i > 0) ? ", " + $(el).text() : $(el).text(); }); return html; } } else { return "Never"; } } })(jQuery); 

 ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } a[data-selected] { background: #f0f0f0; } .menu > li { position: relative; } .menu > li > a { background-color: #eee; color: #333; display: inline-block; padding: 10px 20px; } .menu li:hover > .sub-menu { opacity: 1; visibility: visible; } .menu .sub-menu { position: absolute; left: 0; background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s; } .menu .sub-menu li {} .menu .sub-menu li a { color: #777; display: block; padding: 5px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class="menu"> <li> <a href="#">Never</a> <ul class="sub-menu"> <li><a href="#">Sat</a> </li> <li><a href="#">Sun</a> </li> <li><a href="#">Mon</a> </li> <li><a href="#">Tue</a> </li> <li><a href="#">Wed</a> </li> <li><a href="#">Thu</a> </li> <li><a href="#">Fri</a> </li> </ul> </li> </ul> 

Answer 4

您也可以嘗試一下。 您將必須檢查天數列表中附加的跨度是否等於總天數。

 (function($) { $(".menu").children("li").children("a.all").hide(); $(".menu .sub-menu li a").each(function() { var dayName = $(this).text(); $(this).on("click", function() { var li = $(this).closest(".menu").children("li"); if ($(".menu .sub-menu li").length == $(".menu li a.days span").length + 1 && li.children("a.all").is(":visible") == false) { li.children("a.days").hide(); li.children("a.all").show(); li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>'); } else { li.children("a.all").hide(); li.children("a.days").show(); if (li.children("a.days").children("span:contains('" + dayName + "')").length == 0) { li.children("a.days").append('<span class="day-name">, ' + dayName + '</span>'); } else { li.children("a.days").children("span:contains('" + dayName + "')").remove(); } } }); }); })(jQuery); 

 ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } .menu > li { position: relative; } .menu > li > a { background-color: #eee; color: #333; display: inline-block; padding: 10px 20px; } .menu li:hover > .sub-menu { opacity: 1; visibility: visible; } .menu .sub-menu { position: absolute; left: 0; background-color: #fff; box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2); min-width: 200px; opacity: 0; visibility: hidden; transition: all 0.3s ease 0s; } .menu .sub-menu li {} .menu .sub-menu li a { color: #777; display: block; padding: 5px 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul class="menu"> <li> <a href="#" class="days">Every</a> <a href="#" class="all">Everyday</a> <ul class="sub-menu"> <li><a href="#">Sat</a> </li> <li><a href="#">Sun</a> </li> <li><a href="#">Mon</a> </li> <li><a href="#">Tue</a> </li> <li><a href="#">Wed</a> </li> <li><a href="#">Thu</a> </li> <li><a href="#">Fri</a> </li> </ul> </li> </ul>