Clever Geek Handbook

jQuery element with for url

I have 3 divs with data-image="1"

data-image="2"

data-image="3"

.

And I have a variable $img_nubmer

.

I need to take a div url from an image with an element data-image = $img_nubmer

.

Something like $url = $("'.img[data-image="+$img_number+"']").css("background-image")

How can i do this?

+3


source to share


2 answers


I would try

$img_number = 5;  // just an example
$url = $("img[data-image='"+$img_number+"']").css("background-image");  // grab the background property

So for a complete example:



window.getURL = function() {
  $img_number = $('[type="number"]').val();
  $url = $("[data-image='" + $img_number + "']").css("background-image");
  $url = $url.replace('url(', '').replace(')', ''); // lose the extra details
  alert($url);
}
      

        
        
        
      

    
div.image {
  background-image: url('http://graph.facebook.com/205500370/picture?type=large');
  height: 150px;
  width: 150px;
}

div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  }
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image" data-image="5"></div>
<div>
  <input type="number" value="5" />
  <br>
  <button onclick="getURL()">Get Image URL</button>
</div>
Run codeHide result


+2


source


You can add a variable to your selector as such:

var img_number = 1;
$('img[data-image="'+img_number+'"]');


View Codepen example

+2


source






More articles:


All Articles