0

こんにちは、問題があります。クリックされた p と彼の innerhtml をページで確認し、それに合わせて img サイズを変更します。ここで見ることができます： http://jsfiddle.net/YgL5Z/

また

私のhtml：

<div class="one_of_4_colum"><p class="mysizeNum" onclick="mySize()">4</p></div>
  <div class="one_of_4_colum"><p class="mysizeNum" onclick="mySize()">3</p></div>
  <div class="one_of_4_colum"><p class="mysizeNum" onclick="mySize()">2</p></div>
  <div class="one_of_4_colum"><p class="mysizeNum" onclick="mySize()">1</p></div>
<img class="myPreviewElmo">

私のjs

 function mySize()
        {
            if ((this.innerHTML) == "4") {
                $('.myPreviewElmo').css('height', '200px');
            }
            if (this.innerHTML == "3") {
                $('.myPreviewElmo').css('height', '150px');
            }
            if (this.innerHTML == "2") {
                $('.myPreviewElmo').css('height', '100px');
            }
            if (this.innerHTML == "1") {
                $('.myPreviewElmo').css('height', '50px');
            }
        }

ありがとうございました

4

5 に答える 5

1

次のようなことを試してください：

$(".mysizeNum").click(function() {
    var innerText = parseInt($(this).text());
    var height = innerText * 50;
    $('.myPreviewElmo').css('height', height + "px");
})
于 2013-11-06T10:27:04.640 に答える
0

あなたのコードには非常に多くの問題があったので、私はこの jsfiddle でそのほとんどを書き直しました - http://jsfiddle.net/YgL5Z/7/ おそらくまだ改善の余地がありますが、これは仕事をきれいに終わらせます.

$(function () {
    $(".mysizeNum").click(function() {
        var newheight=(parseInt($(this).text())*50);
        $('.myPreviewElmo').height(newheight);
    });
});
于 2013-11-06T10:37:56.643 に答える
0

on*まず、イベント属性を使用しないでください。それらは時代遅れであり、関心の分離には適していません。代わりに jQuery でイベントを添付してください。また、属性を使用data-*してコードを簡素化することもできます。

<div class="one_of_4_colum">
    <p class="mysizeNum" data-height="200px">4</p>
</div>
<div class="one_of_4_colum">
    <p class="mysizeNum" data-height="150px">3</p>
</div>
<div class="one_of_4_colum">
    <p class="mysizeNum" data-height="100px">2</p>
</div>
<div class="one_of_4_colum">
    <p class="mysizeNum" data-height="50px">1</p>
</div>
<div class="myPreviewElmo">

$('.mysizeNum').click(function () {
     $('.myPreviewElmo').css('height', $(this).data('height'));
});

フィドルの例

于 2013-11-06T10:25:45.430 に答える
0 
<div class="one_of_4_colum">
    <p class="mysizeNum" data-size="4">4</p>
</div>
<div class="one_of_4_colum">
    <p class="mysizeNum" data-size="3">3</p>
</div>
<div class="one_of_4_colum">
    <p class="mysizeNum" data-size="2">2</p>
</div>
<div class="one_of_4_colum">
    <p class="mysizeNum" data-size="1">1</p>
</div>
<div class="myPreviewElmo">

それから

jQuery(function () {
    var heights = {
        'size-1': '50px',
        'size-2': '100px',
        'size-3': '150px',
        'size-4': '200px'
    }
    $('.mysizeNum').click(function () {
        $('.myPreviewElmo').css('height', heights['size-' + $(this).data('size')]);
    })
})

デモ:フィドル

于 2013-11-06T10:26:59.843 に答える
0

HTML は次のようになります -

<div class="one_of_4_colum"><p class="mysizeNum">4</p></div>
  <div class="one_of_4_colum"><p class="mysizeNum">3</p></div>
  <div class="one_of_4_colum"><p class="mysizeNum">2</p></div>
  <div class="one_of_4_colum"><p class="mysizeNum">1</p></div>
<div class="myPreviewElmo"></div>

そしてあなたのjavascript -

$(document).ready(function() {
    $('.mysizeNum').click(function() {
        $('.myPreviewElmo').height(parseInt($(this).text())*50);
    });
});

さらに、フィドルで jQuery ライブラリが有効になっていることを確認してください。

于 2013-11-06T10:28:29.883 に答える