Question

使用JQuery加载文档时，我尝试选择每个<img>并为其指定一个新属性title，并将其设置为等于属性alt的值。当用户将鼠标悬停在元素上时，title应该出现在工具提示中。使用控制台，我似乎能够有效地选择每个元素，但是当我把它放在一起时似乎出现了问题。

HTML：

<ul class="list">

<li><img href="#" src="url" data-toggle="tooltip" data-placement="right" alt="first-tooltip"></li>

<li><img href="#" src="url" data-toggle="tooltip" data-placement="right" alt="second-tooltip"></li>

<li><img href="#" src="url" data-toggle="tooltip" data-placement="right" alt="third-tooltip"></li>

</ul>

JS：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   //enable tooltips

    $('.list li').children().each( function(){  //perform function on each <a>
      var thisAltText = $(this).attr('alt');  //select the alt value
      $(this).attr('title', thisAltText);  //set title value to equal alt value
    });
});

如您所见，这不起作用：http://codepen.io/shawnmurtagh/pen/ZpVgkz

仅供参考 - 我正在使用.children()，因为我需要在实际项目中选择不同的列表项。

Answer 1

试试这个

$( ".list li" ).each(function() {
    var thisAltText = $(this).children().attr('alt');
    $(this).children().attr('title', thisAltText);
});

或

$( ".list li a" ).each(function( index ) { var thisAltText = $(this).attr('alt'); $(this).attr('title', thisAltText); });

或

$( ".list li" ).each(function( index ) { var thisAltText = $(this).find('img').attr('alt'); $(this).find('img').attr('title', thisAltText); });

或

$( ".list" ).children().each(function( index ) { var thisAltText = $(this).find('img').attr('alt'); $(this).find('img').attr('title', thisAltText); });

在这里玩https://jsfiddle.net/47jgmzju/

Answer 2

这样做：

 $(document).ready(function(){ 
        $('.list li').children().each( function(){  //perform function on each <a>
          var thisAltText = $(this).attr('alt');  //select the alt value
          $(this).attr('title', thisAltText);  //set title value to equal alt value
        });
        $('[data-toggle="tooltip"]').tooltip();   //enable tooltips
    });

如何使用JQuery将一个html属性的值更改为等于不同属性的值？

2 个答案: