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的新手，可以使用一些指针。

我的问题是：包含似乎没有像我期望的那样工作。如果“model-1”不存在，但“Product-Addon-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>

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

1 个答案:

经过测试和工作！