Question

我当前正在创建一个Web应用程序，功能之一是允许用户创建一个div并为其分配标签，该标签将添加到类中，然后标签名称将显示在基于div的类名。问题是我要在更改的类名时更改标签名。如果我有多个div，则无法仅更改一个标签。

我正在使用event.target来获得单击，但是如果分别单击2个div，两者仍然都被选中，并且两个类名都会更改。

//assign label and display it on the sides
$("#boxContain").click(function (event) {
console.log(event.target.nodeName);

$("#labels").on("change", function () {
    var modal = document.getElementById('lblList');
    if ($(event.target).attr('name') == null) {
        var e = document.getElementById("labels");
        var strUser = e.options[e.selectedIndex].text;
        console.log(strUser);

        var btn = document.getElementById("submitLbl"); //get submit btn
        btn.onclick = function () {
            event.target.setAttribute('name', strUser); //set the div name to the label
            $(event.target).addClass(strUser);


            var p = document.createElement("p");
            $(p).text(strUser);
            $(p).attr('id', strUser);
            $(p).attr('class', 'lbl');
            $(p).addClass(strUser);
            $("#existingLbl").append(p);
            modal.style.display = "none";

            $('#labels')[0].selectedIndex = 0;

        }

    } else {
        event.target.removeAttribute('ondblclick');
    }
});

});
//Edit labels
function edit(e) {
var classname = e.className.split(' ')[4];
return classname;
};
$('#createBoxBtn').click(function () {
$('.box').click(function () {
    var currentLbl = edit(this);
    console.log(currentLbl);
    var element = this;
    $('#editLblBtn').on('click', function () {
        document.getElementById('errorMessage').style.display = "none";
        var modal = document.getElementById('lblList');
        var span = document.getElementsByClassName("close")[0];
        var btn = document.getElementById('submitLbl');
        var edit = document.getElementById('editLbl');
        btn.style.display = "none";
        edit.style.display = "block";
        modal.style.display = "block";
        $('#labels').on('change', function () {
            var list = document.getElementById("labels");
            var newLbl = list.options[list.selectedIndex].text;
            $(edit).on('click', function () {
                var p = document.getElementById(currentLbl);
                if ($(p).attr('id') == currentLbl) {
                    $(p).text(newLbl);
                    $(p).removeClass(currentLbl);
                    $(p).addClass(newLbl);
                    $(p).attr('id', newLbl);
                    $(element).removeClass(currentLbl);
                    $(element).addClass(newLbl);
                    $(element).attr('name', newLbl);
                    $('#labels')[0].selectedIndex = 0;
                } else if ($(p).attr('id') == "Copyof" + currentLbl) {
                    $(p).text(newLbl);
                    $(p).removeClass(currentLbl);
                    $(p).addClass(newLbl);
                    $(p).attr('id', 'Copyof' + newLbl);
                    $(element).removeClass(currentLbl);
                    $(element).addClass('Copyof' + newLbl);
                    $(element).attr('name', newLbl);
                    $('#labels')[0].selectedIndex = 0;
                }
            }); //end of edit
        }); //end of #labels
        span.onclick = function () {
            modal.style.display = "none";
        };
        edit.onclick = function () {
            modal.style.display = "none";

        };
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        };
        $('#labels')[0].selectedIndex = 0;
    }); //end of #editLblBtn
  }); //end of .box

}); //end of #createBoxBtn

当我编辑标签时，div的类名和名称应更改为新标签，相应的p标签也应更改。如何实现此目的？有什么方法可以清除事件中存储的数据？我点击了其他元素吗？

如何根据</p> <div>名称更改<p>的内容？

0 个答案: