Question

我正在努力做今天早上最简单的事情，但我的大脑不会参与......过去几周我一直在学习基本的javascript和Jquery。我有一段javascript代码，我想将其转换为jquery，我希望我的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>

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

Answer 1

javascript:void(0);放置在click绑定内时，return false可以复制document.getElementById('light')的行为。

$("#light")可以重写为$(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 }); });。

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

{{1}}

Answer 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 / fadeOut jQuery方法，以获得更好的视觉效果 - 如果您想要即时效果，请在其中使用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方法，如第二个例子。

Answer 3

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

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

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

        return false;
    });
});

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

Answer 4

假设你在第一个标签上有一个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 designers视频

Answer 5

嗯。好像有几个人打败了我。

以下是我的答案：

<!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>

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

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

转换为Jquery

5 个答案: