当数据为空时,无法使用 javascript 创建输入

Can't create input when data null with javascript

本文关键字:javascript 创建 输入 数据      更新时间:2023-09-26

我有一个示例代码

<script type="text/javascript">
function remove_news(id) {
    try {
        $('news_list').removeChild($('news_'+id));
        $('news_list').removeChild($('input_news_'+id));
        if($('news_list') == '') {
            var input = document.createElement('input');
            input.setAttribute("type", "hidden");
            input.setAttribute("name", "news_id");
            input.setAttribute("value", "0");
            document.getElementById("news_list").appendChild(input);
        }
    } catch(err){}
}
</script>
<div id="news_list">
<div id='news_1'> News no 1 <a href='#' onclick='remove_news(1); return false;'>[Delete]</a></div>
<input type="hidden" id="input_news_1" name="news_id" value="1" />
</div>

当我运行代码时,选择删除链接是结果不显示<input type="hidden" name="news_id" value="0" />

如何解决?

你需要使用 #news_id 等作为 jQuery 选择器,#

try {
    $('#news_list').removeChild($('#news_'+id));
    $('#news_list').removeChild($('#input_news_'+id));
    if($('#news_list').html() == '') {
        var input = document.createElement('input');
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "news_id");
        input.setAttribute("value", "0");
        document.getElementById("news_list").appendChild(input);
    }
 } catch(err){}

但是,您不需要混合使用jQuery和常规JavaScript。既然你使用的是jQuery,你不妨使用所有的jQuery。 我不能保证上述内容甚至会起作用。

try {
    // Instead of removing a child node, just remove the element directly:
    $('#news_'+id).remove()
    $('#input_news_'+id).remove();
    if($('#news_list').html() == '') {
        var input = $.create("<input type='hidden' name='news_id' value='0'>");
        $('#news_list').append(input);
    }
 } catch(err){}

如果要检查对象是否存在,请不要将 jQuery 对象与空字符串进行比较。

if($('news_list') == '') { ...}

检查非零长度。正如其他人提到的,看起来您缺少用于识别元素的哈希值。

if($('#news_list').length == 0) { ...}

此外,这个if语句中的逻辑似乎有缺陷。您检查news_list是否存在,然后尝试在最后一行中通过相同的 id 获取元素。有点难说,因为正如我提到的,您正在根据字符串查询对象。这说不通。

    if($('news_list') == '') {
        var input = document.createElement('input');
        input.setAttribute("type", "hidden");
        input.setAttribute("name", "news_id");
        input.setAttribute("value", "0");
        document.getElementById("news_list").appendChild(input); //doesn't exist?
    }
如果我

理解正确的话,并且看到您使用jQuery:

function remove_news(id) {
    var newsList = $('#news_list');          //cache news list
    $('#news_'+id,newsList).remove();       //then remove the news
    $('#input_news_'+id,newsList).remove(); //as well as the accompanying input
    if(newsList.length){                    //and if there is no news left
        $('<input type="hidden">').attr({   //create a hidden input
            'name':'news_id',               
            'value':'0'
        }).appendTo(newsList);              //and append to list
    }
}

$('<input type="hidden">')的解释是IE不支持像$('<input>').attr({'type':'hidden'})那样进行动态输入更改

一些评论:

> function remove_news(id) {
>      try {

绝对没有必要尝试。赶到这里。防御性编码,而不是在填充单元格中。

>          $('news_list').removeChild($('news_'+id));
>          $('news_list').removeChild($('input_news_'+id));

你似乎在jQuery和纯javascript之间有冲突,所以:

  var news_list = document.getElementById('news_' + id);
  news_list && news_list.parentNode.removeChild(news_list);
  var input_news_list = document.getElementById('input_news_' + id);
  input_news_list && input_news_list.parentNode.removeChild(input_news_list);
> 
>          if($('news_list') == '') {

您刚刚从 DOM 中删除了该元素,因此您不会在那里找到它。将其与空字符串进行比较也是一个糟糕的选择,我认为这是一个测试,以查看该元素是否在文档中。由于没有必要,因此可以将其删除。

>              var input = document.createElement('input');
>              input.setAttribute("type", "hidden");
>              input.setAttribute("name", "news_id");
>              input.setAttribute("value", "0");

如果 yoy 想做的只是清除价值,为什么还要做这一切?无论如何,放弃 setAttribute 调用并直接设置属性更简单:

  var input = document.createElement('input');
  input.type = 'hidden';
  input.name = 'news_id';
  input.value = '0';
>              document.getElementById("news_list").appendChild(input);
>          }     
>     } catch(err){}  }

Ih HTML(为方便起见,我的包装):

> <div id='news_1'> News no 1 <a href='#' onclick='remove_news(1);
>  return false;'>[Delete]</a></div>

当您不想要 A 元素时,为什么要使用 A 元素?使用跨度并适当地设置其样式(或者,上帝保佑,一个按钮):

<div ...><span onclick="remove_news(1);">...</span></div>

可以使用div 的 id 使函数更通用,这样就不必在调用中传递它。然后,您可能只需将一个侦听器附加到一个祖先,该祖先可以看到点击来自哪里并从那里解决它(即委托)。