Question

我从数据库中提取图像并在页面上显示。现在我想要的是，每当用户点击任何图像时，该图像的描述应该出现在div中。指导我。

这是在while循环中 -

<input type="image" src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>" onclick="showElement(this.id)" height=97>

和js函数 -

function showElement(x){
    alert(x);
    var divid=document.getElementById(x);
    divid.style.visibility="visible";
}

Answer 1

你的HTML应该是这样的

 <img src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>"  onclick="showElement(this.id)" />
 <div id="des_<?php echo $row_data['name'];?>" style="display:none;">Hard coded value here</div>

和javascript一样

function showElement(x){
        alert(x);
        var divid=document.getElementById('des_'+x);
            divid.style.disply="inline";
}

Answer 2

如果你可以使用jquery，你可以这样做

<div class="image_block">
    <img src="path/to/image.png" alt='myimage' class='an_image' />
    <div class="image_desc" style="display:none">
        Lorem ipsum dolor consectetuer sit amet
    </div>
</div>

<script>
$( document ).ready(function() {
    $('.image_block .an_image').click(function() {
        $(this).parent().find('.image_desc').toggle();
    });
});
</script>

Answer 3

您可能想要使用

onclick="showElement(yourdescription.id)"

或类似

onclick="showElement(<?php echo $row_data['description_id']; ?>)"

因为this.id是当前元素ID（您点击的那个），而不是您描述的ID

Answer 4

在你的while循环中，还有一个包含描述的div，并标有图像的id，如下所示：

<div id="description-<?php echo $row_data['name'];?>" style="display:none;"><?php echo $row_data['desscription']' ?></div>

然后，像这样修改你的功能：

    function showElement(x){
    var divid=document.getElementById(x);
    document.getElementById('description-' + divid).style.display="block";
}

Answer 5

使用你的js函数，假设div已经在位，改变你的js函数，如：

    function showElement(x){
        alert(x);
        var divid=document.getElementById('desc_'+x);
        divid.innerHTML = <?php echo $row_data['description'];?>
        divid.style.visibility="visible";
    }

在使div显示之前，您基本上添加了以下行：

divid.innerHTML = <?php echo $row_data['description'];?>

在此之前，img行应该更改为使用不同的id：

<input type="image" src="<?php echo $row_data['image'];?>" id="<?php echo $row_data['name'];?>" onclick="showElement(this.id)" height=97>

因此图像行的id为'imageName'，描述DIV的id为'desc_imageName'格式。确保您的HTML构建遵循相同的命名。

Answer 6

这是一个显示Javascript方面的例子。演示： jsfiddle

<input type="image" id="theImage"  onclick="showElement('textSpan')"  src="imageUrl"  onclick="showElement('textSpan')" height=97>
<div id='textSpan'>something</div>

使用Javascript：

function showElement(x){    
    var theDiv = document.getElementById(x);
    theDiv.style.visibility="visible";
}

Answer 7

您可以将jQuery用于此目的。我将用一小段代码解释：

<html>
<head>
    <script>
        $(document).ready(function(){
            $("img").click(function(){
                var alt = $(this).attr("alt");
                alert(alt);
            });
        });
    </script>
</head>
<body>
    <img src="test.jpg" alt="IMAGE HAS THESE(WHATEVER) DETAILS" />
</body>
</html>

上面这段代码显示了有关放在img标签的alt属性中的图像的详细信息。

当对图像进行单击时，如何在div中显示该图像的描述？

7 个答案: