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

首先，不要使用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

你的 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 回答
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 回答