Question

点击它后我需要获取值输入元素。

这是我的HTML代码：

    <div data-role="popup" id="popupShapes" data-theme="none" style="z-index:999">
        <div data-role="collapsibleset" data-theme="b" data-content-theme="a" style="margin:0; width:250px;">
            <div data-role="listview" data-inset="false">
                <ul data-role="listview">
                    <li>
                        <input type="radio" name="type" value="point" id="pointToggle" />
                        <label for="pointToggle">draw point</label>
                    </li>
                    <li>
                        <input type="radio" name="type" value="line" id="lineToggle" />
                        <label for="lineToggle">draw line</label>
                    </li>
                    <li>
                        <input type="radio" name="type" value="polygon" id="polygonToggle" />
                        <label for="polygonToggle">draw polygon</label>
                    </li>
                </ul>
            </div><!-- /collapsible -->
        </div><!-- /collapsible set -->
    </div><!-- /popup -->

这是点击输入元素后触发的jquery函数。

$("#popupShapes ul li input").click(function (element) {
    var el = $("#" + element.target).val();   
});

我的问题是如何获得点击输入的价值？

Answer 1

使用this定位当前点击的元素，例如$(this).val()：

$("#popupShapes ul li input").click(function(element) {
  var el = $(this).val();
  console.log(el);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="popup" id="popupShapes" data-theme="none" style="z-index:999">
  <div data-role="collapsibleset" data-theme="b" data-content-theme="a" style="margin:0; width:250px;">
    <div data-role="listview" data-inset="false">
      <ul data-role="listview">
        <li>
          <input type="radio" name="type" value="point" id="pointToggle" />
          <label for="pointToggle">draw point</label>
        </li>
        <li>
          <input type="radio" name="type" value="line" id="lineToggle" />
          <label for="lineToggle">draw line</label>
        </li>
        <li>
          <input type="radio" name="type" value="polygon" id="polygonToggle" />
          <label for="polygonToggle">draw polygon</label>
        </li>
      </ul>
    </div>
    <!-- /collapsible -->
  </div>
  <!-- /collapsible set -->
</div>
<!-- /popup -->

Answer 2

你也可以使用“currentTarget.value”

$("#popupShapes ul li input").click(function (element) {
    var el = element.currentTarget.value;  
    console.log(el);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="popup" id="popupShapes" data-theme="none" style="z-index:999">
        <div data-role="collapsibleset" data-theme="b" data-content-theme="a" style="margin:0; width:250px;">
            <div data-role="listview" data-inset="false">
                <ul data-role="listview">
                    <li>
                        <input type="radio" name="type" value="point" id="pointToggle" />
                        <label for="pointToggle">draw point</label>
                    </li>
                    <li>
                        <input type="radio" name="type" value="line" id="lineToggle" />
                        <label for="lineToggle">draw line</label>
                    </li>
                    <li>
                        <input type="radio" name="type" value="polygon" id="polygonToggle" />
                        <label for="polygonToggle">draw polygon</label>
                    </li>
                </ul>
            </div><!-- /collapsible -->
        </div><!-- /collapsible set -->
    </div><!-- /popup -->

Answer 3

$("#popupShapes ul li input").click(function (element) {
  //var el = $("#" + element.target).val(); 
  console.log($(this).val()); // will display point, line or polygon appropriately whichever input is clicked.
});

Answer 4

我为你提出了一些建议（其中一些来自@RoryMcCrossan）：

出于可访问性原因，您应该捕获change事件而不是click事件。单击不是更改输入状态的唯一方法。
您不需要查看event.target，jQuery将始终将感兴趣的元素作为this上下文变量传递（注意：传递的参数为Event对象，而不是“元素”）。
根据this变量，您可以直接访问其值，而无需使用jQuery方法this.value
我总是建议使用.on来注册事件处理程序，因为它使意图更清晰。 .click函数（以及该系列中的其他函数）cn用于注册一个事件处理程序和触发器一个，具体取决于参数，这意味着你有阅读函数参数以找出意图。
#popupShapes中没有其他“有趣”元素，因此您的选择器太具体了。

鉴于此：

$("#popupShapes input").on("change", function() {
    var value = this.value; 
    ...
});

为了进一步提高效率，您可以告诉jQuery不要直接在每个按钮上注册事件处理程序，而是在其容器元素上注册。更改单选按钮选择后，事件将冒泡通过DOM，直到找到事件处理程序。这称为事件委派。

完全放弃你：

$("#popupShapes").on("change", "input", function() {
    var value = this.value; 
    ...
});

Answer 5

我认为你需要$（this）.val（）;在您的点击事件中。要么在您的单击方法中，使用此方法获取值 $（本）.attr（＆＃34;值＆＃34）;

单击后如何获取元素的值？

5 个答案: