Question

我正在使用按钮工作。这是一个仅在javascript中创建的按钮。该网站是一种数据（JSON文件），因此有一个工作人员。当有人尝试进行搜索时，例如搜索位于伦敦的brach工作人员并且工资超过24K，当点击按钮时，所有工作人员与此搜索相关的内容将一个接一个地出现。

.*

我希望在按搜索排序的每个工作人员之后显示一个按钮，因此我无法在HTML中真正实现它？这就是我所拥有的：

for(var i in data.staff){
    if( ( branchType == data.staff[i].type ) || (branchType == "Any") ) {
        output += "<p>" + data.staff[i].type + " $" + data.staff[i].salary +"</p>"  +  "<a href=" + data.staff[i].url + "><p>
<img src=" + data.staff[i].picture + "></a>" + data.staff[i].description + 
("button") + "</p>";
    }
}

但它确实不起作用。我在页面上打印的是：按钮有什么想法吗？

Answer 1

我认为代码不完整，因为有几个错误。例如：

输出未在函数中定义

按钮范围外的button.addEventListener

但你需要这样的东西并为列表中的每一行调用它：

function createButton(parentDomElement, func)
{
  var button = document.createElement("input");
  button.type = "button";
  button.value = "im a button";
  button.onclick = func;
  parentDomElement.appendChild(button);
}

并且你的“渲染”循环需要创建一个DOM元素并调用按钮函数。

for(var i in data.staff)
{
    if( ( branchType == data.staff[i].type ) || (branchType == "Any") )
    {
       // Create paragraph DOM element and set content to your data and the call
       // createButton(domElement, func);
    }
}

Answer 2

我注意到你的问号标签中有jquery，所以我认为你想要使用它。

下面的代码在每个员工项目后添加一个按钮。

每个按钮都附有一个点击事件。

当您点击该按钮时，您会收到一条警告，其中包含以下消息：执行某些操作。

$(document).ready(function(){
    $('body').on('click','input.staff-button',function() {
        alert('do something');
    });

    var output = '';
    for (var i in data.staff) {
        if ((branchType === data.staff[i].type) || (branchType === "Any")) {
            output += '<div class="staff-item-'+i+'">';
            output += '<p>' + data.staff[i].type + ' $' + data.staff[i].salary +'</p>';
            output += '<p><a href="' + data.staff[i].url + '"><img src="' + data.staff[i].picture + '"></a></p>';
            output += '<p>' + data.staff[i].description +  '</p>';
            output += '<p><input type="button" id="staff-'+i.toString()+'" class="staff-button" /></p>';
            output += '</div>';
        }
    }
    $('body').append(output);
});

希望这有帮助！

javascript按钮不会出现

2 个答案: