Question

此处创建了从Button click事件的父级获取商品代码和升级基本代码的功能。在div内进行比较，以检查数据提供代码和数据选择床代码中的“提供容器”中是否存在相同的提供代码和升级代码。

不确定下面的代码是获得预期结果的正确方法。

HTML：

<div class="main-container">
    <div id="item1" class="content">
        <div class="left-container"><h1>Title 1</h1></div>
        <div class="right-container">
            <div class="offer-container" data-offer-code="Code001" data-selected-bed-code="AA" data-upgrade-bed-code="BB">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow()">Book Now</a>
            </div>
            <div class="offer-container" data-offer-code="Code002" data-selected-bed-code="EEE" data-upgrade-bed-code="FFF">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow()">Book Now</a>
            </div>
        </div>
    </div>
    <div id="item2" class="content">
        <div class="left-container"><h1>Title 2</h1></div>
        <div class="right-container">
            <div class="offer-container" data-offer-code="Code001" data-selected-bed-code="BB" data-upgrade-bed-code="CC">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow()">Book Now</a>
            </div>
            <div class="offer-container" data-offer-code="Code002" data-selected-bed-code="FFF" data-upgrade-bed-code="GGG">
                <h2>Offer Title</h2>
                <a class="button" href="javascript:void(0);" onClick="bookNow()">Book Now</a>
            </div>
        </div>
    </div>
</div>

JS：

function bookNow(){
    var getOfferCode = $(this).parent().attr('data-offer-code');
    var getSelectedbedCode = $(this).parent().attr('data-selected-bed-code');
    var getUpgradeBedCode = $(this).parent().attr('data-upgrade-bed-code');

    //Get getOfferCode & getUpgradeBedCode from book now click event.
    //Check if same offer code & upgrade code exists in any of "offer-container" containers - data-offer-code & data-selected-bed-code
    $('.offer-container').each(function() {
        if((getOfferCode && getUpgradeBedCode).length){
            var getSelectedBedCode = getUpgradeBedCode;
            var getTitle = $(this).parent().find('.leftcontainer h1').html();
            console.log("Selected bed code: " +getSelectedBedCode);
            console.log("getOfferCode: " +getOfferCode);
            console.log("getTitle: " +getTitle);
        }
    });
}

Answer 1

$(this)有时未引用所需的元素..因此，您需要将参数传递给函数bookNow(el)并使用el而不是{{1} }
然后在html this中将onClick传递给类似this

您可以从这里开始..

onClick="bookNow(this)"

function bookNow(el){
    var getOfferCode = $(el).parent().attr('data-offer-code');
    var getSelectedbedCode = $(el).parent().attr('data-selected-bed-code');
    var getUpgradeBedCode = $(el).parent().attr('data-upgrade-bed-code');

    $('.offer-container').each(function() {
        if($('[data-selected-bed-code="'+getSelectedbedCode+'"]').length && $('[data-selected-bed-code="'+getSelectedbedCode+'"]').length){
            var getSelectedBedCode = getUpgradeBedCode;
            var getTitle = $(el).closest('.content').find('h1').html();
            console.log("Selected bed code: " +getSelectedBedCode);
            console.log("getOfferCode: " +getOfferCode);
            console.log("getTitle: " +getTitle);
        }
    });
}

说明：：如果存在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main-container"> <div id="item1" class="content"> <div class="left-container"><h1>Title 1</h1></div> <div class="right-container"> <div class="offer-container" data-offer-code="Code001" data-selected-bed-code="AA" data-upgrade-bed-code="BB"> <h2>Offer Title</h2> <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a> </div> <div class="offer-container" data-offer-code="Code002" data-selected-bed-code="EEE" data-upgrade-bed-code="FFF"> <h2>Offer Title</h2> <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a> </div> </div> </div> <div id="item2" class="content"> <div class="left-container"><h1>Title 2</h1></div> <div class="right-container"> <div class="offer-container" data-offer-code="Code001" data-selected-bed-code="BB" data-upgrade-bed-code="CC"> <h2>Offer Title</h2> <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a> </div> <div class="offer-container" data-offer-code="Code002" data-selected-bed-code="FFF" data-upgrade-bed-code="GGG"> <h2>Offer Title</h2> <a class="button" href="javascript:void(0);" onClick="bookNow(this)">Book Now</a> </div> </div> </div> </div>元素，$('[data-selected-bed-code="'+getSelectedbedCode+'"]').length将返回大于0的数字..您可以使用getSelectedCode进行检查存在一个元素..我不知道您要使用此== 1做什么，但是您可以使用上面的代码进行检查。

注意：如果没有，请不要忘记添加jquery库

更新：

if(

function bookNow(el){
    var getOfferCode = $(el).parent().attr('data-offer-code');
    var getSelectedbedCode = $(el).parent().attr('data-selected-bed-code');
    var getUpgradeBedCode = $(el).parent().attr('data-upgrade-bed-code');

    
   if($('*[data-offer-code="'+getOfferCode+'"][data-selected-bed-code="'+getSelectedbedCode+'"]').length > 1){
    $('*[data-offer-code="'+getOfferCode+'"][data-selected-bed-code="'+getSelectedbedCode+'"]').not($(el).closest('.offer-container')).each(function() {
        var getTitle = $(this).closest('.content').find('h1').html();
        console.log("getTitle: " +getTitle);
      });
   }
}

jQuery-从按钮获取数据attr值并在div中进行比较以检查是否存在

1 个答案: