Question

我现在一直在滚动寻找解决方案，我似乎无法使其发挥作用。

我正在尝试制作某种类型的库，您可以将鼠标悬停在图标上，同时将鼠标悬停在图像标记上。正如你从下面的图片中看到的那样，我的php语句在左边返回了2张图片。而在悬停时我希望悬停的图像显示在大img标签中。但是徘徊不起作用。

这是我的javascript

    <script type="text/javascript">
        //imageview
        $(document).ready(function loading(){
        var getimg = document.getElementById("icoimg").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        });
    </script>

这是我的php mysqli while循环

  $count = 1;
  if($count <= 6){
  while($row = mysqli_fetch_array( $query )) {
    $imgcase = $row['Showcase_Image'];
    $itemname = $row['Product_Name'];
    $itemid = $row['Product_ID'];
    echo "<div class='imgico' id='imgico'><img id='icoimg' name='icoimg' src=$imgcase onmouseover='loading();' /></div></br>";
    $count++;
 }
}

这是大img预览

<div class="imgprev" id="imgprev" width="460" height="300"><img id="selectedimg" width="460" height="300" /></div>

我尝试过多次尝试发明我自己的代码。我在网上搜索但没有运气。我在想的是MAYBE，因为标签内生成的id具有相同的ID，也许我的img悬停是无用的。也许我需要找到一种方法来让每个生成的id标签成为唯一的id并调用，然后调用该标签的id，该id应该是＆＃34; unique＆＃34;在JavaScript中然后应用该功能？如果是这样的话？任何可以帮助我的救星？ Thx提前！ Php和Javascript only..no CSS plz（除非它是唯一的希望......哈哈）

编辑：我做了一个＆＃34; Hardcoding＆＃34;它工作，但即使它硬编码我也不希望它像这样工作。我想显示最多5张图像，这就是为什么我在我的PHP代码中的while循环之前有一个计数功能。但如果我找不到更好的方式我认为我只会坚持这个不专业的硬文大声笑

if($count <= 6){
while($row = mysqli_fetch_array( $query )) {
    $imgcase = $row['Showcase_Image'];
    $itemname = $row['Product_Name'];
    $itemid = $row['Product_ID'];
    echo "<div class='imgico' id='imgico'><img id=$count name='icoimg' src=$imgcase onmouseover='loading$count();' /></div></br>";
    $count++;



    function loading1(){
        var getimg = document.getElementById("1").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading2(){

        var getimg = document.getElementById("2").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading3(){
        var getimg = document.getElementById("3").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading4(){
        var getimg = document.getElementById("4").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };
        function loading5(){
        var getimg = document.getElementById("5").getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        };


        echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";

Answer 1

你不能使用id作为选择器来获取img，因为它应该是唯一的。

相反，在您的javascript中，您可以传递对调用loading（）函数的元素的引用：

echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";

<script type="text/javascript">
        //imageview
        $(document).ready(function loading(elm){
        var getimg = elm.getAttribute("src");
        document.getElementById("selectedimg").src = getimg;
        });
</script>

Answer 2

我的网页现在正常运作。我从Galcha得到的答案是我用过的第一件事，所以它没有真正帮助。经过一番思考后，我决定用$(document).ready(function loading(elm)替换function loading(elm)。所以我的脚本现在看起来像这样

function loading(elm){
 var getimg = elm.getAttribute("src");
 document.getElementById("selectedimg").src = getimg;
}

使用此功能后，悬停功能完美无缺。但是它不会在页面加载时自动显示第一个图像。所以我稍微修改了我的while语句，现在看起来像这样。

$count = 1;
    if($count <= 6){
    while($row = mysqli_fetch_array( $query )) {
        $imgcase = $row['Showcase_Image'];
        $itemname = $row['Product_Name'];
        $itemid = $row['Product_ID'];
        echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";
        if($count <= 1){
            $imgfirst = $imgcase;
        }
        $count++;
     }
    }

现在我的网页完美无缺。请问为什么我的while循环中有一个计数＆lt; 1语句？因为如果我只是在selectedimg src代码中回显$ imgcase，我将获得最后一个src自动显示的图像。我想要第一个。这就是为什么我计算一个＆lt; = 1来得到第一个链接并给第一个链接一个单独的变量和echo的$ imgfirst在selectedimg src中。

我的代码有点杂乱，但......它的确有效，我猜大声笑。

php img悬停并显示为不同的img标签

2 个答案: