Magento javascript undefined不是函数jquery selectric？

Posted 2021-04-24

我在我的网站上遇到问题，试图在标题中添加一些下拉菜单！

我正在使用带有Airhotels模块的Magento CE 1.8.0。

奇怪的是它在某些页面上有效，有些则没有。在我看来，直接与Airhotels模块相关的页面似乎不起作用，也许这是一个线索？

从这些图像中可以看出我收到错误undefined is not a function：

• 破碎

• 工作的

我已将此行添加到All Pages下的airhotels.xml中

<action method="addJs"><script>airhotels/jquery.selectric.js</script></action>

这是我在public_htmlappdesignfrontenddefaultstylish emplatepagehtmlheader.phtml中的jQuery脚本

<script type="text/javascript">

var jQnc = jQuery.noConflict();

jQnc(document).ready(function(){

  jQnc('#header-profile-links').selectric();
  jQnc('#header-browse-links').selectric();
  jQnc('#custom-currency-selector').selectric(); 

  jQnc('#customOptions').selectric({
    onChange: function(element){
    if(jQnc(element).val().toLowerCase().indexOf("english") >= 0) {
        jQnc('p#labelFi').css('background','url(http://sleepmyhome.com/skin/frontend/default/stylish/images/flag_en.png) 10% 50% no-repeat');
        jQnc('p#labelFi').removeClass('labelFi').addClass('labelEn');
        window.location.href = jQnc(element).val();
        }
    if(jQnc(element).val().toLowerCase().indexOf("finnish") >= 0) {
        jQnc('p#labelEn').css('background','url(http://sleepmyhome.com/skin/frontend/default/stylish/images/flag_fi.png) 10% 50% no-repeat');
        jQnc('p#labelEn').removeClass('labelEn').addClass('labelFi');
        window.location.href = jQnc(element).val();
        }
    },
    optionsItemBuilder: function(itemData, element, index){
    jQnc('#customOptions').addClass("customOptions langSelectWidth");
        return element.val().length ? '<span class="ico ico-' + element.attr('title') +  '"></span>' + itemData.text : itemData.text;
    }
  });
});
</script>

任何帮助表示赞赏我真的被卡住了！

答案

我认为问题在于获得价值尝试类似的东西（这是一个坏例子 - 下一个是好的）：

<ul class="customOptions">
    <li class="">Select something</li>
    <li class=""><span> Choice 1</span></li>
    <li class="selected"><span> Choice 2</span></li>
    <li class=""><span> Choice 3</span></li>
</ul>

使用JS代码：

$(function(){
    $('.customOptions').selectric({
        maxHeight: 300,
        onChange: function(element) {
           alert( $(element).val() );
        }
    });
});

结果是空的，

但现在尝试这样的事情：

<ul class="customOptions">
    <li class="">Select something</li>
    <li class=""><span data-value="value1"> Choice 1</span></li>
    <li class="selected"><span data-value="value2"> Choice 2</span></li>
    <li class=""><span data-value="value2"> Choice 3</span></li>
</ul>

把东西放进李 - 即。选择1，带有数据属性，您可以在其中放置一些自定

$(function(){
    $('.customOptions').selectric({
        maxHeight: 300,
        onChange: function(element) {
           alert( $('.selectricItems').find('.selected span').attr('data-value') );
        }
    });
});

我认为，如果你使用这种方法，你应该能够从data-attr中获取所选值并做任何你想做的事情。 （记住 - 不要将data-attr =“”放入LI标签 - 它不起作用）