Question

我正在尝试使用现有的href值作为操纵css的目标。不幸的是，我似乎无法使其发挥作用。我需要一点帮助，哪里出错了。

$(function(){

    $('.tab-items a').each(function(){
    
        var target_ids = $(this).attr('href').toLowerCase();;
    
        var target_image =$(target_ids).find('a:first img').attr('src');
        
        $(this).css('background' 'url("'+ target_image +'")');
        
    })

})

.tab-items a { 
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin: 5px;
  display: block;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-items">
    <li>
        <a href="#nature_231">Nature</a>
        <a href="#people_541">People</a>        
        <a href="#people_961">Animals</a>                
    </li>
    
</ul>

<div>
    <div id="nature_231">
        <a href="#"><img src="http://lorempixel.com/400/200/nature/1" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/400/200/nature/2" alt="" /></a>            
        <a href="#"><img src="http://lorempixel.com/400/200/nature/3" alt="" /></a>        
    </div>

    <div id="#people_541">
        <a href="#"><img src="http://lorempixel.com/400/200/people/1" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/400/200/people/2" alt="" /></a>            
        <a href="#"><img src="http://lorempixel.com/400/200/people/3" alt="" /></a>        
    </div>

    <div id="#animals_961">
        <a href="#"><img src="http://lorempixel.com/400/200/animals/1" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/400/200/animals/2" alt="" /></a>            
        <a href="#"><img src="http://lorempixel.com/400/200/animals/3" alt="" /></a>        
    </div>    
    
    
    
</div>

Answer 1

看得出，工作正常

您在css（）

的参数中缺少逗号分隔符

$(function(){

    $('.tab-items a').each(function(){
    
        var target_ids = $(this).attr('href').toLowerCase();;
    console.log(target_ids)
        var target_image =$(target_ids).find('a:first img').attr('src');
        
       console.log(target_image)
        $(this).css('background', 'url("'+ target_image +'")');
        
    })

})

.tab-items a { 
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  margin: 5px;
  display: block;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-items">
    <li>
        <a href="#nature_231">Nature</a>
        <a href="#people_541">People</a>        
        <a href="#people_961">Animals</a>                
    </li>
    
</ul>

<div>
    <div id="nature_231">
        <a href="#"><img src="http://lorempixel.com/400/200/nature/1" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/400/200/nature/2" alt="" /></a>            
        <a href="#"><img src="http://lorempixel.com/400/200/nature/3" alt="" /></a>        
    </div>

    <div id="#people_541">
        <a href="#"><img src="http://lorempixel.com/400/200/people/1" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/400/200/people/2" alt="" /></a>            
        <a href="#"><img src="http://lorempixel.com/400/200/people/3" alt="" /></a>        
    </div>

  

 <div id="#animals_961">
        <a href="#"><img src="http://lorempixel.com/400/200/animals/1" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/400/200/animals/2" alt="" /></a>            
        <a href="#"><img src="http://lorempixel.com/400/200/animals/3" alt="" /></a>        
    </div>    
    
    
    
</div>

Answer 2

关于JQuery的IDK，但是在Javascript中，我只是遍历了一个＆＃39; a＆＃39;标签搜索正确的href，像这样，你甚至可以使它成为ID你的href的函数：

var matchHref = function(input) {
    var a = document.getElementsByTagName('a'), href, target;

    for(var i = 0, j = a.length; i < j; ++i) {
        href = a[i].getAttribute('href');
        if(href === input){
            target = a[i];
        }
    }
    return target;
}

然后你可以这样称呼它：

matchHref('href-name').style.whatever-you-change;

如何获取href值并将其用作目标的id

2 个答案: