Question

我有一个小脚本：

<script type="text/javascript">
    $(document).ready(function(){
      $('a').click(function (e) {
        e.preventDefault();
        $('#iframe2').show(1000);
        $('#iframe2').attr('src', "http://www.htp-crm.pl/");
        $(this).hide(1000);
      }); 
    });
</script>

和html：

<a href="#" id="1">LINK1</a><br>
<a href="#" id="2">LINK2</a><br>
<a href="#" id="3">LINK3</a><br>
1<iframe id="iframe1" style="display: none;"></iframe><br>
2<iframe id="iframe2" style="display: none;"></iframe><br>
3<iframe id="iframe3" style="display: none;"></iframe><br>

我怎么能通过动态功能来做到这一点？它总是一样的： id = 1的链接显示iframe1 id = 2的链接显示iframe2 ... 链接ID = 27显示iframe27

我用这个：

<script type="text/javascript">
    $(document).ready(function(){
        $('a').click(function (e) {
            var linkId=$(this).attr('class');
            e.preventDefault();
            $('.show_km_'+linkId).show(1000);
            $('.show_km_'+linkId).attr('src', "calendar_files/index-km.php?id='.$row['iid'].'");
            $(this).hide(1000);
        }); 
    });
</script>

我使用此脚本显示我与所选地址之间的谷歌距离。 if iframe有'display：none'为什么我对位置权限有疑问？我认为这个问题可能会在我点击链接后显示iframe :( 我可以在这里改变一下吗？

//好的，我修复谷歌地图脚本:)。谢谢大家告诉我如何更改脚本。最好的问候！

Answer 1

试试这个......

<script type="text/javascript">
    $(document).ready(function(){
        $('a').click(function (e) {
            var linkId=$(this).attr('id');
            e.preventDefault();
            $('#iframe'+linkId).show(1000);
            $('#iframe'+linkId).attr('src', "http://www.htp-crm.pl/");
            $(this).hide(1000);
        }); 
    });
</script>

Answer 2

您可以遍历您的主播以获取id并将id分配给您要显示的iframe：

$('a').click(function(e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $('iframe#' + id).show();
})

Answer 3

我建议使用data来引用主播和iframe之间的链接，就像这样......

<a href="#" data-iframe="iframe1">LINK1</a><br>
<a href="#" data-iframe="iframe2">LINK2</a><br>
<a href="#" data-iframe="iframe3">LINK3</a><br>
1<iframe id="iframe1" style="display: none;"></iframe><br>
2<iframe id="iframe2" style="display: none;"></iframe><br>
3<iframe id="iframe3" style="display: none;"></iframe><br>

然后你可以在click处理程序中像这样引用数据......

<script type="text/javascript">
    $(document).ready(function(){
        $("a").on("click", function (e) {
            e.preventDefault();
            var $iframe = $("#" + $(this).data("iframe"));
            $iframe.show(1000);
            $iframe.attr("src", "http://www.htp-crm.pl/");
            $(this).hide(1000);
        }); 
    });
</script>

我还建议不要使用ID作为数字。除了它不友好的阅读，因为它没有告诉你它是什么，有些浏览器不喜欢它。

动态jquery点击功能

3 个答案: