Question

我有两个文件在xml.php中，我正在显示xml文件中的数据还通过此代码显示带有xml数据的按钮

<input type="button" id="class" value="Select this Agent" onClick="Selected(this.id);">

因此页面上显示的按钮等于xml中的元素。我想改变点击按钮的背景颜色。这是我改变按钮样式的javascript代码

function Selected(ClickedId){
        alert(ClickedId);
        ClickedId.css('background-color', 'Green');
    }

并且整个代码是

<?php
                $xml = simplexml_load_file("agent.xml") or die("Error: Cannot create object");
                function processXML($node){
                    foreach($node->children() as $agent => $data){      
                        $agent= trim($agent);   
                            if($agent!="" && $agent=='image'){
                                ?><div class="inline"><?php 
                                echo "<br>";
                                echo "</br>";
                                echo "</br>";
                                echo '<img src='.$data.' >';?></div>
                                <!--<input type="button" value="Select this Agent">--><?php
                            }
                            elseif($agent == 'phone'){
                            ?><div class="btqn"><input type="button" id="class" value="Select this Agent" onClick="Selected(this.id);"></div> <?php

                            }
                            elseif($agent!=""){
                                ?> <div class="Table"><?php echo $data;?></div>
                                <?php
                                //echo "</br>";
                            }
                            else{
                                echo "<hr>";
                            } 
                            processXML($data);
                        }
                }  
                processXML($xml);
            ?>

所以，任何人都可以告诉我我错在哪里。任何建议都应该是值得注意的请帮忙

Answer 1

试试

更改此行

<input type="button" id="class" value="Select this Agent" onClick="Selected(this.id);">

到

<input type="button" id="class" value="Select this Agent" onclick="Selected(this);">

请注意此处，而不是传递id this引用。

所以你可以使用

function Selected(ClickedId){
    alert(ClickedId);
    ClickedId.style.backgroundColor = 'green';
}

JQuery的

$("#class").click(function(){

$(this).css("background-color","green");

})

See Fiddle Demo

Answer 2

尝试

document.getElementById(ClickedId).style.backgroundColor = "green";

[根据用户要求更新了部分]

首先从id更改为类选择器，因为id不应该重复并传递this而不是this.id。此外，如果您想清除所有其他按钮背景，您可以使用getElementsByClassName()功能。 HTML

<input type="button" class="class" value="Select this Agent" onClick="Selected(this);">
<input type="button" class="class" value="Select this Agent" onClick="Selected(this);">
<input type="button" class="class" value="Select this Agent" onClick="Selected(this);">

Javascript代码

 function Selected(elem) {
        var buttons = document.getElementsByClassName('class');
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].style.backgroundColor = '';
        }
        elem.style.backgroundColor = "green";
    }

Jsfiddle here

如何更改Clicked特定按钮的样式？

2 个答案: