Jquery控制ul标签组的class切换

jquery控制class

问题:控制ul标签组点击单选,需要切换对应样式。样式和htlm如下
image

<div class="drag-settings-item">
	<div class="item-hd">对齐方式</div>
	<div class="item-bd">
		<ul class="item-label-box" id="headerAlign">
			<li data-value="0">左对齐</li>
			<li data-value="1">居中</li>
			<li data-value="2" class="on">右对齐</li>
		</ul>
	</div>
</div>

解决:给li绑定click事件,点击时切换对应class

$(function () {
	var ClassChange = function (el, multiple) {
		this.el = el || {};
		this.multiple = multiple || false;

		// Variables privadas
		var links = this.el.find("li");
		// Evento
		links.on('click', {
		  el: this.el,
		  multiple: this.multiple
		}, this.dropdown)
	};

  ClassChange.prototype.dropdown = function (e) {
    var $el = e.data.el;
    $this = $(this);
    $next = $this.next();

    if($this.attr("class") != "on"){
      $this.toggleClass('on');
    }

    if (!e.data.multiple) {
      $el.find('li').not($this).removeClass('on');
    }
  };

  new ClassChange($('#headerAlign'), false);
});
posted @ 2021-07-31 11:03  艾米啊  阅读(266)  评论(0)    收藏  举报