Question

jquery点击功能..适用于所有范围，已经检查过代码，但这一切都设置为这个..

例如：http://jsfiddle.net/dualdesign/8TBC3/9/

Code Jquery：

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}

    DropDown.prototype = {
       initEvents : function() {
          var obj = this;
          obj.dd.on('click', function(event){
             $(this).toggleClass('active');
             return false;
          });

          obj.opts.on('click',function(){
             var opt = $(this);
             obj.val = opt.text();
             obj.index = opt.index();
             obj.placeholder.text(obj.val);
          });
       },

       getValue : function() {
          return this.val;
       },
       getIndex : function() {
          return this.index;
       }
    }

    $(function() {
       var dd = new DropDown( $('.wrapper-dropdown-5') );
       $(document).click(function() {
          // all dropdowns
          $('.wrapper-dropdown-5').removeClass('active');
       });
    });

我动态填充这个HTML，所以有几个div。 Wrapper-dropdown-5 ..

用于wordpress的代码HTML com ACF插件：

<div id="select" class="wrapper-dropdown-5" tabindex="1">
     <span><i class="fa fa-hand-o-right"></i> <?php echo $first_row['zamba-var']; ?></span>
    <ul class="dropdown">
    <?php while(has_sub_field('zamba-detalhes')): ?>
        <li><a href="#"><?php the_sub_field('zamba-var'); ?></a></li>
    <?php endwhile; ?>
   </ul>
</div>

在同一个例子中，我想使用数据值将文本包含在p中，跟随..

<div class="wrapper-dropdown-5">
    <span><i class="fa fa-hand-o-right"></i> <?php echo $first_row['zamba-var']; ?></span>
    <ul class="dropdown">
    <?php while(has_sub_field('zamba-detalhes')): ?>
        <li><a href="#" data-var="<?php the_sub_field('zamba-var'); ?>" data-varvalor="<?php the_sub_field('zamba-varvalor'); ?>" data-vardesc="<?php the_sub_field('zamba-vardesc'); ?>"><?php the_sub_field('zamba-var'); ?></a></li>
    <?php endwhile; ?>
    </ul>
</div>

我试过这段代码，没有结果..

Code Jquery：

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();

    valor = this.opts.data('varvalor');
    desc = this.opts.data('vardesc');
}

    DropDown.prototype = {
       initEvents : function() {
          var obj = this;
          obj.dd.on('click', function(event){
             $(this).toggleClass('active');
             return false;
          });

          obj.opts.on('click',function(){
             var opt = $(this);
             obj.val = opt.text();
             obj.index = opt.index();
             obj.placeholder.text(obj.val);

             obj.opts.next('p.varvalor').text(valor);
             obj.opts.next().next('p.vardesc').text(desc);

          });
       },

       getValue : function() {
          return this.val;
       },
       getIndex : function() {
          return this.index;
       }
    }

    $(function() {
       var dd = new DropDown( $('.wrapper-dropdown-5') );
       $(document).click(function() {
          // all dropdowns
          $('.wrapper-dropdown-5').removeClass('active');
       });
    });

Answer 1

您需要为每个DropDown元素创建一个.wrapper-dropdown-5对象的实例。因为每个下拉列表都有自己的状态（如所选项目，它的索引等）

$('.wrapper-dropdown-5').each(function () {
    var dd = new DropDown($(this));
})

演示：Fiddle

jquery点击功能..适用于所有范围

1 个答案: