javascript - PHP 中的图像和可见性

Question

我试图在 Stack Overflow 中找到这个问题，但由于没有找到它，所以我问它:

我正在尝试创建一个包含两列表格的程序。在第一列中我有一个图像，第二列是空的。当我点击图像时，我想在第二列中看到一个 URL。

如果我转到第二行并单击图像，那么第一行中的 url 将消失，第二行 url 将出现。这是我的代码，但由于某种原因我不知道它不起作用。如果有人可以提供任何意见或任何建议的代码，我将不胜感激:

<table class="table tb-mytable">
<?php if($as_result){?>
    <td class="img-parent"><img src="../../uploads/<?=$as_result['as_asset']?>" style="width:<?=$width/2?>px; height:<?=$height/2?>px;" class="<?=$as_result['as_id']?> test"  /></td>
    <td class="<?=$as_result['as_id']?> iframe-link">
        <?php echo htmlentities('<iframe frameborder="0" width="'.$width.'px" height="'.$height.'px" style="overflow:hidden;padding:0px; margin:0px;" scrolling="no" src="'.$site_url.'stream/?q=c_'.(filter_input(INPUT_GET, 'mycamp')).'|p_'.$_SESSION['code'].'|a_'.$as_result['as_id'].'"></iframe>                            ');?>
    </td>

这是 JavaScript 部分:

$('.img-parent').click(function(){
    $(this).next('td').css('visibility', 'visible');
});

这是CSS:

.iframe-link{
    visibility: hidden;
}

Answer 1

它可能对您不起作用，因为在您的 click 功能中，您只需更改包含 URL 的相邻第二列的 visibility。但是，您首先需要隐藏最后可见的 URL。一种解决方法是:

 $(function() {
 //Hide the second column as soon as the document loads
 //Although you shouldn't require this since your css already does it
 $( "td.iframe-link" ).css('visibility', 'hidden');

  //The click functions that toggles the visibility of the adjacent element
  $('.img-parent').click(function(){
     //Assuming the class for the adjoining td i.e the second column is iframe-link
     //Hide all such elements first
     $( "td.iframe-link" ).css('visibility', 'hidden');

     //Display the relevant element
     $(this).next('td').css('visibility', 'visible');
  });

});

希望这能让您朝着正确的方向开始。