0

cssが問題を引き起こしている可能性がある場合に備えて、すべてを1つのhtmlドキュメントに入れました... divとcssを使用して作成した4つの緑色のボックスがあります。クリックしたときにサイズが大きくなるようにしたいと思います-おそらく80x80pxから100x100pxまたはそのようなものです。現在、そこにある jQuery コードは、他の誰かの質問への回答から取ったコードです。私は jQuery を初めて使用し、多くの問題を抱えています。どんな助けでも大歓迎です!!

<html>
<head>
<title>For testing</title>

<style type="text/css">
#green_box_container {
    float: left;
    padding: 0px;
    margin-left: 345px;
    height: 300px;
    width: 500px;
}

#green_box1 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}

#green_box2 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}

#green_box3 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}

#green_box4 {
    background-color: #070;
    margin: 0px;
    padding: 0px;
    height: 80px;
    width: 80px;
    float: left;
    margin-left: 20px;
}
</style>

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#green_box_container a").click(function() {
    var $this = $(this),
        val = $this.height() == 200 ? '50px' : '200px';
    $this.stop().animate({
        width: val,
        height: val
    }, "slow");
});
});
</script>

</head>

<body>

<div id="green_box_container">
<a href="#"><div id="green_box1"></div></a>
<a href="#"><div id="green_box2"></div></a>
<a href="#"><div id="green_box3"></div></a>
<a href="#"><div id="green_box4"></div></a>
</div>

</body>
</html>
4

2 に答える 2

0

完全な例をありがとう。これをローカルでテストしましたが、jquery セレクターに問題があるようです。

$("#green_box_container a") と言うと、green_box_container 内のすべてのアンカー タグを取得できます。次に、アンカー タグ内の実際の div ではなく、アンカーのサイズを変更しようとします。

green_box_container 内のアンカー内のすべての div を選択するには、次のように jquery セレクターに別のレベルを追加するだけです。

$("#green_box_container a div")

お役に立てれば。

于 2013-03-19T08:00:46.857 に答える
0

（アンカー）のdiv内側をアニメートしたいようです。aこのために、div次のようにアニメーション関数を内部に適用するだけです。

$(document).ready(function () {
    $("#green_box_container a").click(function () {
        var $this = $(this),
            val = $this.height() == 200 ? '50px' : '200px';
        $this.find("div").stop().animate({
            width: val,
            height: val
        }, "slow");
    });
});

アイデアを示すためのフィドルは次のとおりです。http://jsfiddle.net/bHyHS/

于 2013-03-19T07:43:59.737 に答える