Question

我正在试图弄清楚如何在jquery中编写我的以下理论，但我遇到了麻烦，因为我更多的是前端设计人员/开发人员，我不太关心比较/解析。

我有一个包含2个跨度的div（#product）。 1个包含数字的跨度（'。price-ship-1'）和另一个包含数字的隐藏范围（'。price-ship-2'）。

'。price-ship-1'始终存在，并且'。price-ship-2'在某些时候存在;我如何检查'#product'中是否同时存在？

如果仅存在'.price-ship-1'，则根据该号码解析我的号码并显示隐藏的div。但如果两者都存在，则将我的数字解析为“.price-ship-2”并添加一个类。

目前我只检查1个号码并将一个类添加到另一个div，但现在需要检查一个额外的号码并添加一个类，但我不知道如何编写它。我知道我不需要下面的检查，因为'。price-ship-1'总是存在，它只在那里，因为我试图自己写，但无济于事。

我目前的脚本如下：

if ($('.promo-ship-1').length){

$('.promo-ship-1').each(function(){
    var $this = jQuery(this);
    var number=$this.html();
    number=number.substring(1);
    number=parseFloat(number);
    if(number > 99){$this.parents('.ship-banner').addClass('test123');}
});
}

感谢您的时间！

更新：我继承了代码并且还不知道它100％。深入研究它，我的问题实际上比我最初的想法更复杂......我可能不得不为了我的目的而关闭这个问题，但我相信其他人可能会觉得它很有用。

Answer 1

根据您分享的内容，我编写了一段可以模拟您的方案的代码。我相信您可以在自己的代码中使用大部分内容：

＆＃13;

$(function () {
    // Just to work out the elements existence and visibility.
    function calculate() {
        var prod = $('#product');
        var span1 = prod.find('.price-ship-1');
        var span2 = span1.siblings('.price-ship-2');
        var p = $('p');
        
        if (span2.length <= 0) {
            // Second element isn't there.
            p.text('Second element is not there');
        }
        else if (span2.is(':visible')) {
            // Second element is there and is visible.
            p.text('Second element is there and is visible');
        }
        else {
            // Second element is there and is invisible.
            p.text('Second element is there and is invisible');
        }
    }
    
    $('button').on('click', function () {
        var op = $(this).data('id');
        var el = $('#product .price-ship-2');

        switch (op) {
            case 'show':
                el.show();
                break;
            case 'hide':
                el.hide();
                break;
            case 'remove':
                el.remove();
                break;
            case 'add':
                $('<span>', {
                    class: 'price-ship-2'
                }).text('50.00').appendTo($('#product')).show();
        }
        
        calculate();
    });
    
    calculate();
});

＆＃13;

.price-ship-2 {
    display: none;
}
#product {
    margin-bottom: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
    <span class="price-ship-1">100.00</span>
    <span class="price-ship-2">50.00</span>
</div>
<button data-id="show">Show price-ship-2</button>
<button data-id="hide">Hide price-ship-2</button>
<button data-id="remove">Remove price-ship-2</button>
<button data-id="add">Add price-ship-2</button>
<p></p>

＆＃13;

Demo jsFiddle

Answer 2

检查$('#product').find('span').length是否为1或2
取决于您可以解析数字的值并操纵两个div。每个声明都没有必要。

Answer 3

如果你想检查price-ship-1和price-ship-2的存在，并且两者都在id为#product的div下面，那么它就更简单了。

 //try to only query the dom once, it is an expensive op
 var productDiv = $('#product')
 if (productDiv.length) {
     productDiv.each(function () {
         var $this = jQuery(this);
         var priceShip2 = $('.price-ship-2', $this)
         if (priceShip2.length) {
             //PRICE 2 EXISTS
         } else {
             //ONLY PRICE 1 EXISTS
         }
     });
 }

我如何比较2个可见的div数字并根据数字阈值显示div？

3 个答案: