Question

Hey there! I need to add a link for each icon img, so i've been trying this:

$(document).ready(function(){

var arr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  
  var icon;
  
  
$.each(arr, function (i, val) {
    
    

   $.getJSON("https://wind-bow.glitch.me/twitch-api/streams/"+val+"?callback=?").done(function(data){
     
     
   console.log(data.stream);
      if(data.stream==null || undefined) {
        
        
        $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+val+"?callback=?", function(data1){
     
 
      
        
          icon = $("<a href='"+data1.url+"'><img src='" +data1.logo +"'height='42' width='42'></a>");
          
          $(icon).css({"border-color": "grey", "border-width": "4px",
 "border-style": "solid",
  "border-radius": "50%"})
          
 
          

      $("#ico").prepend(icon); 
          

 })
  } 
     else 
       $.getJSON("https://wind-bow.glitch.me/twitch-api/channels/"+val+"?callback=?", function(data1){
     
 
         
      icon = $("<img src='" +data1.logo +"'height='42' width='42'>");
        
          $(icon).css({"border-color": "green", "border-width": "4px",
 "border-style": "solid",
  "border-radius": "50%"})
         
         
$("#ico").prepend(icon); 
          

 })
        
        

    


        
  })   

 
    
 
    

           
   
    
   })
    
    
    
    
    
    
    
    
    })

h3{
  font-family: 'Bitter', serif;
}


.container{
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
    border: 2px solid #6600cc;
    padding: 20px; 
    width: 400px;
    height: 300px; 
   
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    
    <div class="row">
    <div class="col-xs-6 col-md-4">
    
    </div>
      
      <h3 class="text-center">Contacts<i class="fa fa-twitch"></i></h3>
    

    <div class="col-xs-18 col-md-12">
    
    

      <div id ="ico"></div>
   </div>
  </div>

**So as you can see, icons with links ain't stylized, just show a grey oval behind, what i'm looking for, is like those green border icons, but same as grey icons, having correspond links.

I tried to code like a html element and after that, use .css method to get border, it doesn't works.

I really appreciate some help.**

Answer 1

您应该将CSS样式添加到图像而不是锚点。

<a href="https://www.twitch.tv/storbeck">
   <img style="border-color: grey;border-width: 4px;border-style: solid;border-radius: 50%;display: inline-block;" src="https://static-cdn.jtvnw.net/user-default-pictures/49988c7b-57bc-4dee-bd4f-6df4ad215d3a-profile_image-300x300.jpg" height="42" width="42">
</a>

在jQuery中就像这样...

icon = $("<a href='"+data1.url+"'><img src='" +data1.logo +"'height='42' width='42'></a>");       
$(icon).find('img').css({
  "border-color": "grey",
  "border-width": "4px",
  "border-style": "solid",
  "border-radius": "50%"})

演示：https://www.codeply.com/go/WoL7xPXuET

圆角图像与<a> element

1 个答案: