Question

我是一个jquery新手，很长时间使用WordPress。我无法让这两个脚本工作;无论我把他们包括在内。

在Codex上阅读了这个问题之后，我知道我需要更改这些脚本才能使用WordPress的“无冲突模式”，但我不确定我到底要做什么做。

有人可以帮助我并解释我如何在任何时候这样做吗？谢谢。

 function adjustIframes()
{
  $('iframe').each(function(){
    var
    $this       = $(this),
    proportion  = $this.data( 'proportion' ),
    w           = $this.attr('width'),
    actual_w    = $this.width();

    if ( ! proportion )
    {
        proportion = $this.attr('height') / w;
        $this.data( 'proportion', proportion );
    }

    if ( actual_w != w )
    {
        $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
    }
  });
}
$(window).on('resize load',adjustIframes);

// DOM ready
     $(function() {

      // Create the dropdown base
      $("<select />").appendTo("nav");

      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

     });

if( document.createTouch ) {
    this.addEvent(c[j],'tap',this.tipOver,false);
} else {
    this.addEvent(c[j],'mouseover',this.tipOver,false);
    this.addEvent(c[j],'mouseout',this.tipOut,false);
}

Answer 1

将您的jquery代码包含在.ready函数中。下面是为jQuery noConflict模式修改的代码。

jQuery(document).ready(function($) {
    function adjustIframes()
    {
      $('iframe').each(function(){
        var
        $this       = $(this),
        proportion  = $this.data( 'proportion' ),
        w           = $this.attr('width'),
        actual_w    = $this.width();

        if ( ! proportion )
        {
            proportion = $this.attr('height') / w;
            $this.data( 'proportion', proportion );
        }

        if ( actual_w != w )
        {
            $this.css( 'height', Math.round( actual_w * proportion ) + 'px' );
        }
      });
    }
    $(window).on('resize load',adjustIframes);

    // DOM ready
         $(function() {

          // Create the dropdown base
          $("<select />").appendTo("nav");

          // Create default option "Go to..."
          $("<option />", {
             "selected": "selected",
             "value"   : "",
             "text"    : "Go to..."
          }).appendTo("nav select");

          // Populate dropdown with menu items
          $("nav a").each(function() {
           var el = $(this);
           $("<option />", {
               "value"   : el.attr("href"),
               "text"    : el.text()
           }).appendTo("nav select");
          });

           // To make dropdown actually work
           // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
          $("nav select").change(function() {
            window.location = $(this).find("option:selected").val();
          });

         });

    if( document.createTouch ) {
        this.addEvent(c[j],'tap',this.tipOver,false);
    } else {
        this.addEvent(c[j],'mouseover',this.tipOver,false);
        this.addEvent(c[j],'mouseout',this.tipOut,false);
    }
});

另外请确保您已将jQuery文件包含在wordpress主题的标题中。

如何为WordPress包装这些jquery函数？

1 个答案: