-2

みんなありがとう！私は今それを働かせました、ありがとう!

うまくいけば簡単な質問があります: これ: http://jsfiddle.net/gSAjV/2/ は私が達成したいことですが、うまくいかないようです。私は JavaScript を初めて使用するので、HTML ドキュメントにスクリプトを適切に配置する方法がわかりません。などを試してみましたが、うまくいき<script type="text/javascript">ません。

だから、誰かがそれをhtmlドキュメントに入れて動作させるのに時間をかけ、もちろんコード全体を投稿するかどうか疑問に思いました。私はとても素晴らしいでしょう！

私のドキュメント:

<html>
<head>

<style>
.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px;
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}
</style>

<script type='text/javascript'>
$('.childDiv').click(function(){
    $(this)
        .css('background-color','#00ff66')
        .siblings()
        .css('background-color','#ffffff');
});
</script>

</head>
<body>

<div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>
<div id="divParent2" class="parentDiv">
    Group 2
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

</body>
</html>
4

4 に答える 4

2

これをhtmlファイルのどこかに置きます：

<script type="text/javascript">                                         
    $(document).ready(function() {
        $('.childDiv').click(function(){
            $(this).parent().find('.childDiv').css('background-color','#ffffff');
            $(this).css('background-color','#ff0000');
        });
   });
</script>

多かれ少なかれどこにでも配置できますが、</body>タグの直前が適切な場所です。

@MarkK が正しく指摘したように、jQuery ライブラリ自体を参照する必要があります。

これは と の間に<head>あり</head>ます:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
于 2012-06-22T13:12:02.577 に答える
1

$jQuery (関数を含むライブラリ) をインポートするだけです。これは簡単です、追加するだけです

<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

他のスクリプトの前に、HTML に追加します。

于 2012-06-22T13:17:35.370 に答える
1 
<html>
  <head>
     <!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
     <script type="text/javascript" src="jquery.js"></script>
     <sript type="text/javascript">
       jQuery().ready(function($){

          $('.childDiv').click(function(){
             $(this).parent().find('.childDiv').css('background-color','#ffffff');
             $(this).css('background-color','#ff0000');
           });

       });
     </script>
   </head>
   <body>
      <!--the content paste your html here-->
   </body>
</html>
于 2012-06-22T13:18:25.503 に答える
1

jsfiddle では、結果ペインを右クリックしてソースを表示できます。これにより、結果を生成する正確な html が得られます。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.childDiv').click(function(){
    $(this).parent().find('.childDiv').css('background-color','#ffffff');
    $(this).css('background-color','#ff0000');
});



});//]]>  

</script>


</head>
<body>
  <div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>
<div id="divParent2" class="parentDiv">
    Group 2
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

</body>


</html>
于 2012-06-22T13:14:58.843 に答える