javascript - 如何选择具有特定类 jQuery 的特定 div？

Question

我有一个圆圈，当我点击它时，出现了 2 个选项。

<div class="col-sm-2" style="display: block;">
    <span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">
    </span>
    <div class="line" style="display: none;"></div>
    <div class="options" style="display: block;">

        <input type="text" class="search" name="">
        <i class="fa fa-plus float-right"></i>

                        <p class="option" id="Dualstack-Pvt">
            Dualstack-Pvt
            <i class="fa fa-info-circle float-right"></i>
        </p>
                        <p class="option" id="Dualstack-Pvt-2">
            Dualstack-Pvt-2
            <i class="fa fa-info-circle float-right"></i>
        </p>
                    </div>
    <div class="selected" style="display: none;"></div>
</div>

当单击其中一个选项时，我想做一些事情。

我似乎无法选择它。

这就是我现在所拥有的。

$('.' + selector).on("click", function() {

    if (steps.indexOf(selector) != -1) {
        nextStep = steps[steps.indexOf(selector) + 1];
    }

    let self = $(this);

    $('div.options').fadeOut('fast');

    self.animate({
        backgroundColor: fadeColor
    }, 1400);
    self.next().next('.options').slideDown(1000);

    console.log(self)


    self.find('.options').find('option').one("click", function(event) {

        console.log('%c -------->> HERE <<--------', "color: green;");


    });

});

这是我的选择

self.find('.options').find('option').one("click", function(event) {

我认为 find() 会找到匹配的类......不是吗？

请帮助我理解为什么这不起作用......

标签： javascriptjquery

Answer 1

在您的查询中：

self.find('.options').find('option')

该部分self.find('.options')将查找属于 的option子类的元素self。在这种情况下，因为self是<span>没有孩子的，所以选择器将不起作用。请注意，当您使用self.next().next('.options'). 接下来该.find('option')部分将查找标记<option>而不是类option，因此将其更改为.option. 通过这些修复，您将拥有：

self.siblings('.options').find('.option').one("click", function(event) {

    console.log('%c -------->> HERE <<--------', "color: green;");

});

片段示例

$('.fa-mobile').on("click", function() {

    let self = $(this);

    $('div.options').fadeOut('fast');
		self.next().next('.options').slideDown(1000);

    self.siblings('.options').find('.option').one("click", function(event) {

        console.log('%c -------->> HERE <<--------', "color: green;");
        
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-2" style="display: block;">
    <span class="fa fa-mobile circle-icon fa-5x client" style="background-color: rgb(75, 183, 232);">Circle
    </span>
    <div class="line" style="display: none;"></div>
    <div class="options" style="display: block;">

        <input type="text" class="search" name="">
        <i class="fa fa-plus float-right"></i>

                        <p class="option" id="Dualstack-Pvt">
            Dualstack-Pvt
            <i class="fa fa-info-circle float-right"></i>
        </p>
                        <p class="option" id="Dualstack-Pvt-2">
            Dualstack-Pvt-2
            <i class="fa fa-info-circle float-right"></i>
        </p>
                    </div>
    <div class="selected" style="display: none;"></div>
</div>