1

今天早上我正在尝试做最简单的事情，但我的大脑无法参与。过去几周我一直在学习基本的 javascript 和 Jquery。我有一段想要转换为 jquery 的 javascript 代码，我希望我的 javascript 不显眼。

代码片段是

<p>
    This is the main content. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
</p>
<div id="light" class="white_content">
    This is the lightbox content. 
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>

我正在努力使这个灯箱更有效率，但今天似乎无法解决如何转换..任何帮助表示赞赏

4

5 回答 5

3

当放置在点击绑定中时，javascript:void(0);可以复制来自的行为。return false

document.getElementById('light')可以重写为$("#light").

您需要在链接中添加类或 ID 以定位它们。

$(document).ready(function(){
    $("a").click(function() { // replace this selector as appropriate
        // do stuff here - lookup css in the JQuery docs
        return false; // prevents the link's default action - see also e.preventDefault() in the docs
    });
});
于 2012-10-09T10:34:01.990 回答
2

将您的 HTML 更改为：

<p>This is the main content. To display a lightbox click
   <a href="#" id="a_show">here</a></p>

<div id="light" class="white_content">This is the lightbox content.
<a href="#" id="a_close">Close</a></div>
<div id="fade" class="black_overlay"></div>

那么jQuery是：

$(document).ready(function() {
  $("#a_show").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").css("display","block");
      $("#fade").css("display","block");
  });

  $("#a_close").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").css("display","none");
      $("#fade").css("display","none");
  });
});

或者您可以使用fadeIn/ fadeOutjQuery 方法，以获得更好的视觉效果 - 如果您想要即时效果，请使用show()/hide()在它的位置：

$(document).ready(function() {
  $("#a_show").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").fadeIn();
      $("#fade").fadeIn();
  });

  $("#a_close").click(function(e) {
      e.preventDefault(); // Prevent's the click from firing - like JavaScript:void(0)
      $("#light").fadeOut();
      $("#fade").fadeOut();
  });
});

第一个示例类似于类似，并且可用于通过 jQuery 更改其他 CSS 属性 - 但是，如果您想显示/隐藏或淡化元素，请使用本机 jQuery 方法，如第二个示例中所示。

于 2012-10-09T10:38:07.793 回答
2

而不是 javascript style.display='none','block'jquery 用户Hide() ,show()方法

$(document).ready(function(){
    $("a").click(function() { 

$("#fade").hide();
$("#light").show();

        return false;
    });
});

但要理解这一切，你应该先开始学习Jquery，

于 2012-10-09T10:38:46.053 回答
1

假设您在第一个标签上有一个 id="show"，在第二个标签上有一个 id="hide"。

$("#show").click(function(e){
    e.preventDefault()
    $("#light, #fade").show()
})
$("#hide").click(function(e){
   e.preventDefault()
   $("#light, #fade").hide()
})

现在这不是像您的示例那样的内联脚本，因此您需要将其放在标签或外部脚本文件中，然后使用标签拉入

在学习 jquery 时，我可以推荐Jquery for Designer视频

于 2012-10-09T10:39:04.010 回答
1

嗯。似乎有几个人打败了我。

这是我对它的价值的回答：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#a1").click(function() {
            $('#light').show();
            $('#fade').show();
        });
        $("#close").click(function() {
            $('#light').hide();
            $('#fade').hide();
        });
    });
    </script>
</head>
<body>
    <p>This is the main content. To display a lightbox click <a id="a1" href="#">here</a></p>
    <div id="light" class="white_content" style="display:none">This is the lightbox content. 
    <a id="close" href = "#">Close</a>
    </div>
    <div id="fade" class="black_overlay"></div>
</body>
</html>

如果您正在尝试创建灯箱，为什么要重新发明轮子？如果你在周围搜索，你会发现一些预构建的 jQuery 插件......

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

于 2012-10-09T10:49:35.880 回答