如何使用javascript检查单击了哪个p以及它包含了哪些innerhtml

嗨，我有个问题， 我想让我的页面检查哪个p被点击，他的innerhtml是什么，并据此改变img的大小。 你可以在这里看到：

或

我的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">

---

谢谢

首先，不要在*事件属性上使用

。它们已经过时，不利于分离关注点。改为在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() {
    var innerText = parseInt($(this).text());
    var height = innerText * 50;
    $('.myPreviewElmo').css('height', height + "px");
})

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

此外，确保在fiddle中选择jQuery库作为enabled。
您的代码有太多错误，所以我只是用这个jsfiddle重写了大部分代码-可能还有改进的余地，但这很好地完成了工作

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

我正要发布一些非常相似的东西。需要注意的是，设置css属性时不需要“px”。如果不指定单位：）@Archer，它将假定为像素，这只是在分割头发。。。这没关系。@JoshSmickus这不是批评，我只是提出了一个别人可能想知道的观点。我已经把答案选对了，所以我显然不认为有什么问题。@Archer不用担心，这只是同一把剑的另一面；）
$(".mysizeNum").click(function() {
    var innerText = parseInt($(this).text());
    var height = innerText * 50;
    $('.myPreviewElmo').css('height', height + "px");
})

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

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

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