Question

我在这里问了这个问题的前兆： Click link in DIV and show PHP/HTML in separate DIV

然后，在我删除下面显示的第一个脚本后，我能够使第二个脚本工作。我修改了我的问题，但似乎已经沉默了。所以我有一个稍微修改过的问题。

下面两个脚本之间的冲突是什么？如何修改它们以协同工作？基本上我希望能够点击DIV中的任何地方（“.side_items”）并让子锚链接在单独的DIV（“＃main_content”）中打开

使用Javascript：

<script type="text/javascript">
  $(document).ready(function(){ 
   $(".side_items").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
  })
 });
</script>

<script type="text/javascript">
  $(document).ready(function(){
   $(".side_items a").click(function(e){
    e.preventDefault(); 
       $("#main_content").load($(this).attr("href"));
    });
});

</script>

HTML :(稍微简化）

<div id="main_content">
</div>

<div id="right_side">
  <div class="side_items">
  <a href="content.html">
  <img src="images/examplethumb.png" /><br />
  Content</a>
  </div>
</div>

这两个脚本独立工作以实现其个人所需的结果。

Answer 1

这样做：

$(document).ready(function(){  
    $(".side_items").click(function(){ 
        $("#main_content").load($(this).find("a").attr("href"));
        return false; 
    }) 
});

打破它：

$(".side_items").click(fn);

查找具有side_items类的所有元素，并为其分配单击事件处理程序（fn）。每次单击其中一个元素时，将使用元素的上下文执行fn。在丢弃的代码中，您使用了选择器.side_items a，这意味着单击处理程序仅绑定到div内的链接，而不是div本身。

$(this).find("a").attr("href")

查找当前元素（this）中包含的所有链接，并从找到的第一个元素中获取href属性的值。在丢弃的代码中，上下文（this）是一个链接。由于我们的处理程序现在绑定到包含div，因此上下文也是div。要获得链接，您必须找到它。

$("#main_content").load(href);

找到ID为main_content的元素，并将href中找到的内容加载到其中。在丢弃的代码中，您设置了location.href，这会导致页面离开。

Answer 2

我认为您的问题是您尝试两次分配$（）。ready（..）处理程序。

尝试梳理这样的脚本

<script type="text/javascript">

var change_location = function(){ 
    $(".side_items").click(function(){
        window.location=$(this).find("a").attr("href");
        return false;
    });
}

var load_location = function(){
    $(".side_items a").click(function(e){
        e.preventDefault(); 
        $("#main_content").load($(this).attr("href"));
    });
}

$().ready(function(){
    change_location();
    load_function();
});
</script>

希望有所帮助

如何在单独的DIV中制作整个DIV可点击和打开的子链接？

2 个答案: