Question

任何人都可以使这些功能变得简单吗？

我有一个ul：

<ul  class="phone-type">        
        <li class="office" id="1"></li>
        <li class="mobile" id="2"></li>
        <li class="fax" id="3"></li>       
</ul>

和JS：

 var o = 0;var m = 0;var f = 0;
    $('ul.phone-type li.office').click(function () {
        o++;
        $('.phones').append('<input class="form-control phone_type" placeholder="'+ $(this).text()+'-'+o+'" name="phone['+$(this).attr('class')+'-'+o+']" type="text" ><br>');
    });
    $('ul.phone-type li.mobile').click(function () {
        m++;
        $('.phones').append('<input class="form-control phone_type" placeholder="'+ $(this).text()+'-'+m+'" name="phone['+$(this).attr('class')+'-'+m+']" type="text" ><br>');
    });
    $('ul.phone-type li.fax').click(function () {
        f++;
        $('.phones').append('<input class="form-control phone_type" placeholder="'+ $(this).text()+'-'+f+'" name="phone['+$(this).attr('class')+'-'+f+']" type="text" ><br>');
    });

我必须为每个李重置它.. 有什么方法可以让它变得简单!!!! TNX

Answer 1

此方法将允许无限数量的可点击列表元素。只需确保您提供的数据类型＆＃39;包含的任何元素中的属性。

在html元素中存储数据时，通常最好使用＆＃39;数据＆＃39;属性。只有在有一个类时才使用类。

HTML

<ul class="phone-type">
  <li data-type="office" id="1">office</li>
  <li data-type="mobile" id="2">mobile</li>
  <li data-type="fax" id="3">fax</li>       
</ul>
<div class="phones"></div>

JS

// This object will contain how many clicks each element has
  var typeClicks = {};

  $('ul.phone-type li').click(function() {
    var li   = $(this),
        type = li.data('type'),
        text = li.text(),
        clicks;
    // check if typeClicks contains any click data for this element
    if (typeClicks.hasOwnProperty(type)) {
      // if it does, increases tracked clicks by one
      typeClicks[type]++;
      clicks = typeClicks[type];
    } else {
      // if not, this will create an entry for this element
      clicks = typeClicks[type] = 1;
    }
    // if not, this will create an entry for this element
    $('.phones').append('<input class="form-control phone_type" placeholder="'+text+'-'+clicks+'" name="phone['+type+'-'+clicks+']" type="text" ><br>');
  });

使表单动态添加带数字的输入

1 个答案: