改变“;onClick"这个jQuery的操作从清除输入文本改为将输入文本添加到下面的列表中

Changing the "onClick" action of this jQuery from clearing input text to instead adding the input text to the list below?

本文关键字：文本 输入 列表 添加 清除 onClick quot 这个 操作 jQuery 改变      更新时间：2023-09-26

这是小提琴：http://jsfiddle.net/mlynn/3rp5gcdu/2/

当您开始在文本框中键入时，一张加号图片会滑入文本框。它当前已编码，因此当您单击加号时，输入文本将被清除，加号将滑回视图之外。

我希望这样，除了清除文本和将图像滑出视图之外，单击加号还将输入文本添加到下面的列表中。如果你点击"回车"，添加到列表中效果很好，但我希望它在点击加号时也能执行同样的功能，这样用户就可以选择点击回车或点击加号来添加到列表。

希望这是有道理的。

这是我的JS代码：

// sub menus identification
$(function() {
  $('.navbar ul li a').click(function(){  
    $('.navbar > li:first-child > a').text($(this).text());
    $('.navbar > li > ul').addClass('hidden');
    $('.navbar li ul').slideToggle(100);
  });
  $('.navbar > li').mouseenter(function(){
    $(this).find('ul').removeClass('hidden');
  });
  $('.ActiveListItem').click(function(){        
    $('.navbar li ul').slideToggle(300);
  });    
});




//newList
$(document).ready(function() {  
    var ul = $('.lister ul'),
        input = $('input'),
        CategoryIcon;

    input.focus();  

    $('form').submit(function () {
        if (input.val() !== '') {
            var inputVal = input.val(),
                activeNumber = $('.ActiveListItem').text();

            if (activeNumber == "1") {
                CategoryIcon = '<img src="https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_iTunes.png" width="15" height="15"></img>';
            } else {
            CategoryIcon = '<img src="http://images.clipartpanda.com/question-mark-black-and-white-Icon-round-Question_mark.jpg" width="15" height="15"></img>';
            }

            ul.append('<li>' + CategoryIcon + "&nbsp;&nbsp;&nbsp;&nbsp;" + inputVal + '<a href="">X</a></li>');
            if (ul.hasClass('inactive')) {
                ul.removeClass('inactive')
                    .addClass('active');
            }
        };
        input.val('');
        return false;
    });
    ul.on('click', 'a', function (e) {
        e.preventDefault();
        $(this).parent().slideUp();
        if (ul.children().length == 0) {
            ul.removeClass('active')
                .addClass('inactive');
            input.focus();  
        }
    });
});



//clearable
jQuery(function($) {

  // /////
  // CLEARABLE INPUT
  function tog(v){return v?'addClass':'removeClass';} 
  $(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
  }).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
  }).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('').change();
  });

});

看看这个小提琴：http://jsfiddle.net/3rp5gcdu/6/

我正在使用on()方法，在这里我可以指定动态创建的DOM元素的行为。每次鼠标悬停图标时，都可以看到它向input元素添加了一个onX类。

$(document).on('click', 'input.onX', function(){ // do something }<这里，我说的是"每次你点击具有类onX的输入文本，就做点什么"

为了让它更优雅，你可以：

  • 创建函数CCD_ 6
  • 将form submit内部的代码和$(document).on('click', 'input.onX', function()内部的代码复制/粘贴到addItem函数中，并调用两次

您必须添加以下内容：

 $('form').submit();

在上

on('click', '.onX', function(){
}

这是小提琴：http://jsfiddle.net/3rp5gcdu/7/

相关文章：