Question

我在$(document).ready(function(){ ... })内使用此代码：

$('#flavours').on('click', '.toggle-quantity', function(e){
    e.preventDefault();
    var $quantity_percent = $(this).parent().find('.quantity_percent');

    if($quantity_percent.is(':hidden')){
        console.log("is hidden");
        $quantity_percent.show();
    }else{
        console.log("is not hidden");
        $quantity_percent.hide();
    }
});

发生了什么是console.log（）正在运行，但$quantity_percent没有显示/隐藏。

此外，如果我在函数的开头（e.preventDefault之后）添加警报（＆＃39; test＆＃39;），这也不起作用，但是console.log（）继续工作（它正确记录＆＃39;没有被隐藏＆＃39;）。

编辑：相关的HTML标记：

<div id="flavours">

<div class="row flavour" id="flavour_1" style="display: block;">
    <div class="form-group">
        <div class="col-xs-12">
            <fieldset>
                <legend>Flavour 1</legend>
                <div class="col-sm-4">
                    <label>Flavour Name</label>
                    <input type="text" value="" name="flavour_name[]" data-flavour-id="1" id="flavour_name_1" class="form-control autocomp" placeholder="Flavour name">
                    <input type="hidden" value="" name="flavour_id[]" id="flavour_id_1" class="form-control flavour_id">
                    <p class="flavour_info"></p>
                </div>
                <div class="col-sm-6">
                    <label>Flavour Quantity &nbsp; <a href="#" class="btn btn-link btn-xs toggle-quantity"><span class="fa fa-filter"></span> <span class="hidden-sm">Switch to </span>drops per ml</a></label>
                    <div class="input-group" id="quantity_percent">
                        <input type="text" class="form-control" id="flavour_percentage_1" name="flavour_percentage[]" placeholder="Flavour Quantity">
                        <span class="input-group-addon">%</span>
                    </div>
                    <div class="input-group" id="quantity_drops" style="display: none;">
                        <input type="text" class="form-control" id="flavour_drops_1" name="flavour_drops[]" placeholder="Flavour Quantity">
                        <span class="input-group-addon">drops/ml</span>
                    </div>
                    <p class="flavour_recommended_percentage"></p>
                </div>
                <div class="col-sm-2">
                    <label>&nbsp;</label>
                    <button class="btn btn-danger btn-block remove-flavour"><span class="glyphicon glyphicon-remove"></span> Remove</button>
                </div>
            </fieldset>
        </div>
    </div>
</div>

Answer 1

$(this).parent()是一个标签元素，没有.quantity_percent

的孩子

同样quantity_percent是一个id，而不是一个类。使用ID选择器

所以使用

var $quantity_percent = $('#quantity_percent');

而不是

var $quantity_percent = $(this).parent().find('.quantity_percent');

注意：ID必须在HTML中唯一

编辑：根据OP评论

我将其更新为类而不是ID（因为它在动态增长的列表中）

用法

var $quantity_percent = $(this).closest('.col-sm-6').find('.quantity_percent');

Answer 2

.parent()定位<label>，因此无法找到.quantity_percent

jQuery .on（）问题，console.log（）有效但元素交互不起作用

2 个答案: