1

私のページは、同じクラスを持つが ID を持たない div に分割された、php で生成されたコンテンツでいっぱいです。div を管理、変更、削除できるボタンをいくつか表示したいと思います。ボタンは、クラスを変更し、div を削除し、div のコンテンツを選択できる必要があります。これどうやってするの？ボタンの onclick アクションを何かに設定する方法はありますか? onclick="changetheclass(this)" と言うと、このボタンを含む div のクラスが実際に変更されますか?

私はここで意味を成していないと感じています:(誰かが私が話していることを理解しましたか?もしそうなら、これを行う可能性はありますか?前もって感謝します!:)

編集:これは div の 1 つなので、私が話していることを理解できます:

    <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>
4

4 に答える 4

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>
于 2012-04-13T10:40:33.940 に答える
0

まず、onclick="something"-インライン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);
}
于 2012-04-13T10:36:10.633 に答える
0

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.

}
于 2012-04-13T10:30:15.737 に答える
-1 
$('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    
});
于 2012-04-13T10:30:08.840 に答える