Question

我尝试在Stack Overflow中找到这个问题，但由于没有找到它，我问它：

我正在尝试创建一个包含2列表的程序。在第一列中，我有一个图像，第二列是空的。当我点击图像时，我想在第二列中看到一个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');
  });

});

希望这能让你开始朝着正确的方向前进。

php中的图像和可见性

1 个答案: