使用Jquery检查两个不同的元素是否包含特定的单词，如果包含特定的单词，则检查是否包含触发事件。

Question

我有个独特的问题。我有一些代码，我不能访问到第三方控制，我有客户在我的电子商务网站，需要知道额外的节省在特定的产品组合。我正在尝试创建一个Jquery解决方案。以下是html：

<div class="pricing">
    <h2>Price &amp; Summary</h2>
    <dl>
            <dt>model-1</dt><!-- First string to check -->
            <dd>
                $2,499.99
            </dd>
                <dt>Product-Addon-Model-2</dt><!-- Second string to check -->
            <dd>
                    $1,699.99

            </dd>
            <dt class="discount">Promo Savings</dt><!--Append additional savings-->

            <dd class="discount">
                -$300.00
            </dd>

    </dl>
    <h3>
        Total
        <span class="total">

                $3,899.98

        </span>
    </h3>
</div>

以下是我正在尝试纠正的Jquery：

if ($("dl dt:contains('model-1', 'model-2', 'model-3', 'model-4', 'model-5')") && ("dl dt:contains('Product-Addon-Model-2', 'Product-Addon-Model-3')")){
        $( "<p>Additional discounts will be displayed in your cart</p>" ).appendTo( "dt.discount" ); 
}

有一点要注意的是，我有很多型号要出售，我需要针对非常具体的型号，如果页面上有一个型号，我需要检查它们是否选择了两个特定的加载项。如果两个检查点都返回true，那么appendTO语句就会触发。理想情况下，我希望将两个不同的产品列表存储到Array中，但是:contains不接受Array的，我对jquery很陌生，可以使用一些指针。

我的问题是:contains似乎并没有像我所期望的那样工作。如果"model-1“不存在，但是”Product Model-2“却存在，那么它就会触发。我需要确保这两个特定的单词列表在页面上表示，以便附加到火。不是所有的单词，而是每个单词列表中的一个单词必须出现在页面上。

有人建议添加这样的.length：

if ($("dl dt:contains('p6', 'm6', 'm7', 'i8', 'i10')").length && ("dl dt:contains('FlexFit 2', 'FlexFit 3')").length){
        $( "<p>Additional discounts will be displayed in your cart</p>" ).appendTo( "dt.discount" ); 
}

这就引出了未定义的

Answer 1

测试和工作！

没有什么可解释的，只要阅读代码注释，如果有任何疑问，请告诉我。

​

var EXPECTED_MODELS = [ // List of expected models to be found
        'model-1', 
        'model-2', 
        'model-3', 
        'model-4', 
        'model-5'
    ], 
    EXPECTED_PRODS = [ // List of expected products to be found
        'Product-Addon-Model-2', 
        'Product-Addon-Model-3'    
    ];

$(function() {
    
    var dts = $('dl dt'), // Get all 'dt' tags
        elem = $('dt.discount'), // Element used to display a message in UI
        msg = '<p>Additional discounts will be displayed in your cart</p>'; // Message to be displayed

    // Check if model and product exist then show discount message
    if (isExpectedModelAndProduct(dts)) {
        showMsg(msg, elem);
    }

});

/**
 * Used to check if text inside '<dt>' tags from third party HTML matches 
 * any of the entries in EXPECTED_MODELS and EXPECTED_PRODS arrays.
 *
 * @param {Array} arr Contains all '<dt>' tags
 * @returns {Boolean} match
 */
function isExpectedModelAndProduct(arr) {
    var match = false,
        modelExist = false, 
        prodExist = false, 
        dt;
    
    for (var i = 0; i < arr.length; ++i) {
        dt = arr[i];
        if (dt) {
            if (exist(dt.innerText, EXPECTED_MODELS)) {
                modelExist = true;
            }
            if (exist(dt.innerText, EXPECTED_PRODS)) {
                prodExist = true;
            }
            if (modelExist && prodExist) {
                match = true;
                break;
            }
        }
    }
    
    return match;
};

/**
 * Used to check if 'text' exist in specific array.
 * 
 * @param {String} text To be found
 * @param {Array} arr To be searched
 * @returns {Boolean}
 */
function exist(text, arr) {
    return ($.inArray(text, arr) != -1);
};
                
/**
 * Show a message in UI using specific element
 *
 * @param {String} msg To be displayed
 * @param {Object} elem To be used for displaying the message
 */
function showMsg(msg, elem) {
    $(msg).appendTo(elem);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="pricing">
     <h2>Price &amp; Summary</h2>

    <dl><dt>model-1</dt>

        <!-- First string to check -->
        <dd>$2,499.99</dd> <dt>Product-Addon-Model-2</dt>

        <!-- Second string to check -->
        <dd>$1,699.99</dd> <dt class="discount">Promo Savings</dt>

        <!--Append additional savings-->
        <dd class="discount">-$300.00</dd>
    </dl>
     <h3>
        Total
        <span class="total">
                $3,899.98
        </span>
    </h3>

</div>

​