Question

我的页面充满了在div中分割的php生成的内容，它们具有相同的类但没有id。我想显示一些按钮，允许我管理，更改和删除div;按钮应该能够更改类，删除div并选择div的内容。我怎样才能做到这一点？有没有办法将按钮的onclick动作设置为某个东西，比如... onclick =“changetheclass（this）”，这实际上会改变包含这个按钮的div的类？

男人我觉得我在这里没有任何意义:( 有人知道我在说什么吗？如果是这样，有可能这样做吗？提前致谢！：）

编辑：这是一个div，所以你可以理解我在说什么：

    <div class="box"><p>
    this is the content of the div
    <button onclick="change_the_class(this_div_or_something)">click here to change the class of the div</a>
    <button onclick="select_the_content(this_div_or_something)">click here to change the class of the div</a>
    <button onclick="delete_the_whole_div(this_div_or_something)">click here to change the class of the div</a>
</p></div>

Answer 1

这是你要找的吗？

<html>
    <head>
        <script type="text/javascript">
           function changeClass(elm) {
               elm.parentNode.className ='newcss';
           }

           function deleteDiv(elm) {
               var par = elm.parentNode;
               var gran = par.parentNode;
               gran.removeChild(par);
           }
        </script>
    </head>
    <body>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
        <div class='test'>
            Hello
            <button onclick="javascript:changeClass(this);" value="Change CSS">CSS</button>
            <button onclick="javascript:deleteDiv(this);" value="Change CSS">Delete</button>
        </div>
    </body>
</html>

Answer 2

在JS中，您可以使用querySelectorAll：

//get all divs with class "myDiv"
var divs = document.querySelectorAll('div.myDiv');

//for each of the gathered divs, do something with it
for(var i=0; i< divs.length;i++){
    var aDiv = divs[i];

    //"aDiv" is a div in the collection of matched divs
    //you can do anything with it: add buttons etc.

}

Answer 3

首先远离onclick="something" - inline JavaScript。然后是的，你仍然可以在没有id的情况下做你想做的事。

var divs = document.getElementsByTagName('div'),
    result = [],
    len = divs.length,
    i = 0,
    aLink;

for(; i < len; i++){
    // update the condition if there can be more than one class name as this assume a single class name
    if (divs[i].className == 'myClassName') result.push(divs[i]);
}

len = result.length;
i = 0;

for (; i < len; i++) {
aLink = document.createElement('a');
aLink.innerHTML = 'Edit';
aLink._parent = result[i]; // store a reference to the parent div
aLink.href = '#';
aLink.onclick = function(ev) {
ev.preventDefault();
// do your edit stuff here, ev.target._parent contain the targetted div
};
result[i].appendChild(aLink);
}

Answer 4

$('div.my-class').each( function( index, element ){
   var div = $( element ); // not sure if this is needed

   // add the buttons, e.g. via div.html('');

   // add the buttons' click handlers    
});

javascript：如何管理没有ID的div

4 个答案: