Question

这里的任何jQuery专家都可以帮我将以下javascript代码转换为jQuery吗？虽然它有效但我更愿意看到它是用jQuery完成的

function loadit(element)
{
    document.getElementById('container').src = element.rel;
    var tabs = document.getElementById('tabs').getElementsByTagName("a");

    for (var i=0; i < tabs.length; i++)
    {
        if(tabs[i].rel == element.rel) 
        {
            tabs[i].className = "selected";
        }
        else
        {
            tabs[i].className = "";
        }
    }
}

这是HTML

    <div id="tabs"> 
              <ul> 
                <li><a href="#" rel="/root/a" onClick="loadit(this)" class="selected">A</a></li>
                <li><a href="#" rel="/root/b" onClick="loadit(this)">B</a></li>
                <li><a href="#" rel="/root/c" onClick="loadit(this)">C</li> 
              </ul> 
         </div>
<iframe id="container" name="container"></iframe>

以下是我在windowload上填充容器的方法：

function startit()
{
    var tabs = document.getElementById('tabs').getElementsByTagName("a");
    document.getElementById('container').src = tabs[0].rel;
}

window.onload=startit;

Answer 1

假设传入的参数（element）本身就是一个jQuery对象，它可能看起来像这样。

请注意，在处理jQuery对象的情况下，我倾向于在变量前加$来区分它

function loadit($element)
{
    var rel = $element.prop('rel');
    $('#container').prop('src',rel);
    $('#tabs a').each(function(){
        var $a = $(this);
        $a.toggleClass('selected',$a.prop('rel') == rel);
    });
}

编辑：我发现上面的代码中有一个拼写错误。我错过了一行#

$('#tabs a').each(function(){

以下是一个非常简化的实例，代替您的HTML：http://jsfiddle.net/FKf9L/1/

我假设您在点击构成标签的loadit之一时调用a。如果是这种情况，它有点多余，你应该只是在jQuery中锁定a的click事件。制作代码：

$('#tabs a').click(function(){
   var $this = $(this);
   var rel = $this.attr('rel');
   $('#container').prop('src',rel);
   $this.siblings().removeClass('selected');
   $this.addClass('selected');
});

请参阅此实例：http://jsfiddle.net/p99Q2/

edit2 ：您也可以取消startit方法，只需在标签中的第一个click上发出a：

$(document).ready(function(){
    $('#tabs a').click(function(){ 
        ...
    });

    $('#tabs a:first').click();
});

实例：http://jsfiddle.net/p99Q2/2/

Answer 2

这是非常基本的。阅读jQuery教程十五分钟应该教你足够自己在另外十五分钟内做到这一点。

Answer 3

这么多方法。这是使用更多的jquery结构。

function loadit(element)
{
    $('#container')[0].src = element.rel;
    $('#tabs a').each(function(idx){
      var tab = $(this);
      tab.attr('class','');
      if( tab.rel == element.rel )
      {
         tab.attr('class','selected');
      }
    }
}

Answer 4

function loadit(element) {

    var rel = element.rel;

   $("#container").attr("src") = rel;
   var $tabs = $("#tabs a");

  $tabs.each(function() {
      var $tab = $(this);

      $tab.removeClass("selected");

      if ($tab.attr("rel") == rel) {
        $tab.addClass("selected");
      }
   });
}

需要帮助将这段代码转换为jQuery

4 个答案: