Question

你好我有问题，我希望我的页面检查点击了哪个p以及他的内部HTML是什么，并根据它来改变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');
            }
        }

谢谢

Answer 1

尝试这样的事情：

$(".mysizeNum").click(function() {
    var innerText = parseInt($(this).text());
    var height = innerText * 50;
    $('.myPreviewElmo').css('height', height + "px");
})

Answer 2

Firslty，不要使用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'));
});

Example fiddle

Answer 3

<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')]);
    })
})

演示：Fiddle

Answer 4

您的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库为已启用。

Answer 5

你的代码有很多问题，所以我只是用这个jsfiddle重写了大部分内容 - http://jsfiddle.net/YgL5Z/7/可能还有改进的余地，但这可以很好地完成工作。

$(function () {
    $(".mysizeNum").click(function() {
        var newheight=(parseInt($(this).text())*50);
        $('.myPreviewElmo').height(newheight);
    });
});

如何查看点击了哪个p以及javascript包含哪些innerhtml

5 个答案: