Question

我有一个jQuery的工作jj here。基本上，我使用jQuery来隐藏或显示基于选择单选按钮的下拉菜单。

所有内容都适用于jsfiddle，但是当我将其集成到我的网站时却没有。如果已经通过插件分配了点击功能，那么防止冲突的最佳方法是什么？

我试过了.on（'click'，。bind（，。click）（没有任何效果。

HTML：

<div class="foxyshop_variations">
    <label class="variation-8-wide" for="403_1">8' Wide</label>
    <select class="variation-8-wide" id="403_1" name="8'_Wide">
        <option value="Select 8' Wide Kit||c9a7aebec7e7384386231888176bd47864d248a88c2922aed00fba45d8a714ad">Select 8' Wide Kit</option>
        <option pricechange="+0" value="8x8{p+0.00lw-75lc+RS88G}||b7b2c2d752e830d8ca803aa2a0f25dba6081baf2ff4a75e4c8a5dbb382549f51">8x8 (+$0.00)</option>
        <option pricechange="+7000" value="8x10{p+70.00|w-85lc+RS810G}||593e367aab31f5540b068bd1f3404762394538807a137624419389f0d9302fcf">8x10 (+$70.00)</option>
        <option pricechange="+13500" value="8x12{p+135.00|w-95lc+RS812G}||ed2f781d9f9fd7738157ea31c0f552f912f929c960bb73e36ca1d24bba62ffcf">8x12 (+$135.00)</option>
        <option pricechange="+20500" value="8x14{p+205.00|w-105lc+RS814G}||0f528bdd6d6987630a7023b79fd9cf4ac35856199ae824ed1101d8226f6e7fb5">8x14 (+$205.00)</option>
        <option pricechange="+23500" value="8x16{p+235.00|w-115lc+RS816G}||49595b16c4e506f0b936521d82c283cd2dcc15bd85b6a5d3d8e45cc81f3da427">8x16 (+$235.00)</option>
        <option pricechange="+23500" value="8x18{p+235.00|w-125lc+RS818G}||c2a0d4ffa51343cae6a4eba706b448baf1922dcd6827f13a6523fe8bb71d5062">8x18 (+$235.00)</option>
        <option pricechange="+23500" value="8x20{p+235.00|w-135lc+RS820G}||820a5ab4534c2039c25091b0d9ad8c869fa81c28a98a96ccfe344ea009010658">8x20 (+$235.00)</option>
    </select>
    <div class="clr"></div>
    <label class="variation-10-wide" for="403_2">10' Wide</label>
    <select class="variation-10-wide" id="403_2" name="10'_Wide">
        <option value="Select 10' Wide Kit||998d37aa429bbe3570d8e2b58962acd56fff7982a018f34e3ca0c9c88fc5ab47">Select 10' Wide Kit</option>
        <option pricechange="+0" value="10x8{p+0.00|w-110lc+RS108G}||94c9190a6fd9036a48734d8bfa2610702f122f999ee0381419efb7ba6663c411">10x8 (+$0.00)</option>
        <option pricechange="+7000" value="10x10{p+70.00|w-125lc+RS1010G}||9767c842283d2323b09ef69e293659429b041a6fd8695a569d0a4fb25f05179a">10x10 (+$70.00)</option>
        <option pricechange="+13500" value="10x12{p+135.00|w-140lc+RS1012G}||cc1b9825f63e04382881bbf6fd278ab51bd53d052a312c7958cb21d7706cc8f8">10x12 (+$135.00)</option>
        <option pricechange="+20500" value="10x14{p+205.00|w-75.5lc+RS1014G}||6992dcd2f27f9d61d04ba330250966baa245124dbf851f72169064dea6bda315">10x14 (+$205.00)</option>
        <option pricechange="+23500" value="10x16{p+235.00|w-85lc+RS1016G}||62e66d53bd8412bea5ca6c6e149e8ab8c52fcd72275f852cc106320e5d2cf227">10x16 (+$235.00)</option>
        <option pricechange="+23500" value="10x18{p+235.00|w-92.5lc+RS1018G}||4ac77aff339ecda405853c7ced04ebcd330d3a7efeab53428651578a054117c3">10x18 (+$235.00)</option>
        <option pricechange="+23500" value="10x20{p+235.00|w-100lc+RS1020G}||43aade4c64edd6855fddbd8c9234df0de876c62e3430c20e1af5e744588fad12">10x20 (+$235.00)</option>
    </select>
    <div class="clr"></div>
    <div class="foxyshop_radio_wrapper">
        <div class="foxyshop_radio_title">Check One</div>
        <div class="foxyshop_short_element_holder">
            <input type="radio" checked="checked" class="variation-check-one" id="403_3_0" value="8' Wide||250cb4d758d5c0f482b9d48009b03653b8e8d41e6fee682f5578a9b5e4d32abf" name="Check_One">
        </div>
        <label class="variation-check-one foxyshop_no_width" for="403_3_0">8' Wide</label>
        <div class="clr"></div>
        <div class="foxyshop_short_element_holder">
            <input type="radio" class="variation-check-one" id="403_3_1" value="10' Wide||e502477417a1f9d94aa0bd90e4116c485911296d434602822663a3e13df476c0" name="Check_One">
        </div>
        <label class="variation-check-one foxyshop_no_width" for="403_3_1">10' Wide</label>
        <div class="clr"></div>
    </div>
    <div class="clr"></div>
    <label for="quantity_403" class="foxyshop_quantity">Quantity</label>
    <input type="text" class="foxyshop_quantity" value="1" id="quantity_403" name="quantity||203d4bc6421ae54a22598d6ac0e45e8a3d7434c2395a4a4bf2eeeca368532660||open">
    <div class="clr"></div>

jQuery：

$("#403_3_0").click(function () {

    $("#403_2, .variation-10-wide").hide("fast");
    $("#403_1, label.variation-8-wide").show("fast");
});


$("#403_3_1").click(function () {

    $("#403_1, label.variation-8-wide").hide("fast");
    $("#403_2, .variation-10-wide").show("fast");
});

Answer 1

这不是冲突问题。

您只是没有针对正确的元素。在您的网站上，元素ID为

#403_1_0和#403_1_1

Answer 2

使用jQuery noConflict来避免插件冲突问题：

<script type="text/javascript" href="path_to_js"></script>

var j = jQuery.noConflict();


j.on("click", function(){

...

});

jQuery不工作.bind，.on，.click可能发生冲突？

2 个答案: