Question

我正在尝试更改xml文件查找结果中的一个图像的图像不透明度。我希望通过显示所点击图像的正常不透明度来选择图像，并为其他图像显示半透明度。此代码可以很好地返回图像，但由于某种原因，它不会改变点击的不透明度：

的index.php：

<script>
    function showResult(str) {
        if (str.length==0) { 
            document.getElementById("livesearch").innerHTML="";
            document.getElementById("livesearch").style.border="0px";
            return;
        }
        if (window.XMLHttpRequest) {
            xmlhttp=new XMLHttpRequest();
        }
        else {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                        document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
                    document.getElementById("livesearch").style.border="1px solid #A5ACB2";
            }
        }
        xmlhttp.open("GET","php/livesearch.php?q="+str,true);
        xmlhttp.send();
    }
</script>
<div class="uploadarticle" style="cursor:pointer">
Add article from another site<br><br>
</div>
<div class="poppeduploadarticle">
<form method='post' action='php/uploadarticle.php'>
<input type="text" size="40" name="article_url" value="Url of article" onblur="if (this.value == '') {this.value = 'Url of article';}" onfocus="if (this.value == 'Url of article') {this.value = '';}">
<input type="text" size="25" name="article_caption" value="Caption" onblur="if (this.value == '') {this.value = 'Caption';}" onfocus="if (this.value == 'Caption') {this.value = '';}" onkeyup="showResult(this.value)">
<input type="hidden" id="article_image" name="article_image">
<input type="submit" value="Submit">
<div id="livesearch"></div>
<script type="text/javascript">
$(function(){
    $("#livesearch img").click(function() {
    $("#livesearch img").css('opacity','0.5');    
    $(this).css('opacity','1');   
    });
});
</script>
</form>
</div>

livesearch.php：

<?php
    $xmlDoc=new DOMDocument();
    $xmlDoc->load("articleimages.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
    $hint="";
    for($i=0; $i<($x->length); $i++) {
        $y=$x->item($i)->getElementsByTagName('title');
        $z=$x->item($i)->getElementsByTagName('url');
        if ($y->item(0)->nodeType==1) {

            //find a link matching the search text
            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
                if ($hint=="") {
                    $hint="<img width='80px' src='" . $z->item(0)->childNodes->item(0)->nodeValue . "' onclick=\"javascript:document.getElementById('article_image').value='".$z->item(0)->childNodes->item(0)->nodeValue."'\" >";
                }
                else {
                    $hint=$hint . "<img width='80px' src='" . $z->item(0)->childNodes->item(0)->nodeValue . "' onclick=\"javascript:document.getElementById('article_image').value='".$z->item(0)->childNodes->item(0)->nodeValue."'\" >";
                }
            }
        }
    }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="") {
    $response="no suggestion";
}
else {
    $response=$hint;
}

//output the response
echo "Please choose a related image:<br><br>".$response;
?>

livesearch.xml：

<pages>
<link>
<title>Coconut</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut2</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut3</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut4</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
<link>
<title>Coconut5</title>
<url>http://www.website.com/images/coconut.jpg</url>
</link>
</pages>

Answer 1

我可以看到你正在尝试做什么，而且它在正确的轨道上，但你需要很多东西来整理和检查你的PHP和Javascript。

我可以问为什么你不只是从XML文档中提取元素中的文本，使用这个文本作为HTML中许多图像元素的src以及加载它们时，只需使用一点CSS改变onHover的不透明度？

或者我不明白你想要达到的目标？

javascript从xml文件中的结果更改图像不透明度

1 个答案: