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();
  });
});

最初の例はlikeのようなもので、jQueryを介して他のCSSプロパティを変更するのに役立ちます-ただし、要素を表示/非表示またはフェードする場合は、2番目の例のようにネイティブjQueryメソッドを使用します。

于 2012-10-09T10:38:07.793 に答える
2

javascriptjquerystyle.display='none','block'ユーザーHide() ,show()メソッドの代わりに

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

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

        return false;
    });
});

しかし、これをすべて理解するには、最初にJqueryの学習を開始する必要があります。

于 2012-10-09T10:38:46.053 に答える
1

最初のタグにid="show"があり、2にid="hide"があるとします。

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

これは、例のようなインラインスクリプトではないため、タグまたは外部スクリプトファイルに配置してから、タグを使用してプルする必要があります。

jqueryを学ぶとき、私はデザイナー向けのJqueryビデオをお勧めできます

于 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 に答える