Question

我有这个脚本，它的工作完美，但问题是我无法控制代码结构，因为它是动态生成的。

我可以轻松获取元素的值（或者你称之为INPUT的任何东西），但问题是我获取值的方式

$('input:radio[name="meal-356"]').change(function(ev)

其中name =“meal-356”是随机生成的，我可以控制div父类（不是ID）的好东西，所以我想知道它是否有可能从它的父类中获取一个元素的值。

例如，为了让我获得输入名称=“meal-356”的值，我使用此代码

    $('input:radio[name="meal-356"]').change(function(ev){

    if ($(this).val() == 'Burger with fries') {
        var meal = 20;
    }
    else {
        var meal = 30;
    }

    $('#meal').text((meal).toFixed(2)).trigger('change');

});

所以不要使用

$('input:radio[name="meal-356"]').change(function(ev)

我想使用$('.meal-wrapper')，以便该div中的任何输入，textarea或任何形式都具有相同的效果

这是我的完整脚本：

$(document).ready(function() {

    $('input:radio[name="meal-356"]').change(function(ev){

        if ($(this).val() == 'Burger with fries') {
            var meal = 20;
        }
        else {
            var meal = 30;
        }

        $('#meal').text((meal).toFixed(2)).trigger('change');

    });

    $('input:radio[name="drinks-123"]').change(function(ev){

        if ($(this).val() == 'Ice Tea') {
            var drinks = 1;
        }
        else if ($(this).val() == 'Coke') {
            var drinks = 1.20;
        }
        else if ($(this).val() == 'Lemonade') {
            var drinks = 2;
        }
        else if ($(this).val() == 'Water') {
            var drinks = 1.75;
        }
        else if ($(this).val() == 'Hot choco') {
            var drinks = 3;
        }
        else if ($(this).val() == 'Hot coffee') {
            var drinks = 1.25;
        }
        else {
            var drinks = 0;
        }

        $('#drinks').text((drinks).toFixed(2)).trigger('change');
    });


    $('input:radio[name="extras-781"]').change(function(ev){

        if ($(this).val() == 'Rice') {
            var extras = 10;
        }
        else if ($(this).val() == 'Gravy') {
            var extras = 5;
        }
        else {
            var extras = 0;
        }
        $('#extras').text((extras).toFixed(2)).trigger('change');
    });

    $('textarea[name="spoon-112"]').keyup(function(ev){

        var spoon = $(this).val().replace(/\n/g, '<br/>');
		var spoon = spoon*.25;
        $("#spoon").text(spoon).trigger('change');

    });

    $('input:text[name="fork-143"]').keyup(function(ev){

        var fork = $(this).val().replace(/\n/g, '<br/>');
		var fork = fork*.5;
        $("#fork").text(fork).trigger('change');
    });



    $('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
        var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) {
            return acc + +val.textContent   ;
        }, 0);
        $('#total').text(total.toFixed(2));
    })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
    <label class="radio"><input name="meal-356" value="Burger with fries" type="radio"/>Burger with fries</label>
</div>
<div>
    <label class="radio"><input name="meal-356" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>

<h2>Question 2: drinks</h2>
<div class="drinks-123-wrapper">
    <input type="radio" name="drinks-123" value="Ice Tea" /> Ice Tea
    <input type="radio" name="drinks-123" value="Coke" /> Coke
    <input type="radio" name="drinks-123" value="Lemonade" /> Lemonade
    <input type="radio" name="drinks-123" value="Water" /> Water
    <input type="radio" name="drinks-123" value="Hot choco" /> Hot choco
    <input type="radio" name="drinks-123" value="Hot coffee" /> Hot coffee
    <input type="radio" name="drinks-123" value="No drinks-123" /> No drinks-123
</div>

<h2>Question 3: extras</h2>
<div class="drinks-wrapper">
    <input type="radio" name="extras-781" value="Rice" /> Rice
    <input type="radio" name="extras-781" value="Gravy" /> Gravy
    <input type="radio" name="extras-781" value="No Extra" /> No Extra
</div>

<h2>Question 4: How many extra spoon?</h2>
<div class="spoon-wrapper">
    <textarea name="spoon-112" rows="3"></textarea>
</div>

<h2>Question 5: How many extra fork?</h2>
<div class="fork-wrapper">
    <input name="fork-143" type="text" value="" placeholder=""/>
</div>

<hr />
<div class="price-wrapper">
    <b>meal:</b> <span id="meal"></span>
    <div></div>
    <b>drinks:</b> <span id="drinks"></span>
    <div></div>
    <b>extras:</b> <span id="extras"></span>
    <div></div>
    <b>spoon:</b> <span id="spoon"></span>
    <div></div>
    <b>fork:</b> <span id="fork"></span>
</div>

<div class="total-wrapper">
    <h3>
        <b>Total:</b><span id="total"></span>
    </h3>
</div>

Answer 1

在class名称上添加事件监听器，并在change时触发。然后在回调中检索已检查的值。

$('.meal-wrapper :input').on("change", function(){
    var meal = $('.meal-wrapper :radio:checked').val();
    // or, $(this).find(:radio:checked).val(); 

   ...
   ...   

});

$(".drinks-123-wrapper :input").on("change", function(){
  var drinks = $(".drinks-123-wrapper :radio:checked").val();
  // or, $(this).find(:radio:checked).val();
  ...
  ...
});

Answer 2

你试过$('.meal-wrapper :input').change()吗？

而且，只是一个建议，你可以使用switch case作为输入元素值。

Answer 3

好的，如果我理解正确你要么在其父体/ div点击/更改时想要访问元素。或者反之亦然意味着点击你输入的radio-btn你想要访问它的父母（drink-wrapper）。如果是，那么在jquery中有很多方法可以做到这一点意味着将子项作为父项访问这是一些代码

用于访问任何孩子

$("#parent").click(function(){        //#parent = id or class of your parent div which you will click
$(this).find("#child_id/childclass")  //#child_id/childclass= id or class of element you want to access.val()                                
})

在你的情况下它将是

$(".drinks-wrapper").click(function(){
$(this).find('input:radio[name="meal-356"]').attr("checked")
})
//this will return you whether the meal-356 radio checked or not

如果你想要访问父母（反之亦然）然后

<script>
    <div class="grandfather" value="pawan chand">

        <div class="father">
            <div class="son">
                <div class="grandson">

                </div>
            </div>
        </div>
    </div>


    $(".grandson").click(function(){
var grandfather = $(this).parents(".grandfather").val();  // grandfather = pawan chand
    })
</script>

类似地，有一个nearest（）函数只允许访问一个级别，如孙子只访问子，但与parent（）你可以访问其一级到第n级

如何使用jQuery通过类获取div父级的输入值？

3 个答案: