title: Is it possible to use a defined variable as a kind of 'data-content' for the data attribute selector in jQuery?
body: <p>I would like to know if it is possible to use a defined variable as a kind of "data-content" for the data attribute selector in jQuery.</p>
  
  <p>Lets say I have a variable called "imageNumber" which consists of integers:</p>
  
  <p><code>var imageNumber = 1;</code></p>
  
  <p>And I have a row of preview images with a background-image attribute and a data attribute called 'data-image-number="1"', 'data-image-number="2"' and so on:</p>
  
  <pre><code>&lt;div style="background-image:url(example1.jpg);" data-image-number="1"&gt;&lt;/div&gt;
  </code></pre>
  
  
  
  
  
  <p>I look for a way to set the background-image of a kind of "display"-div based on another div selected via a variable(imageNumber) in jQuery.</p>
  
  <p>$("#display_div").css("background-image", $("div[data-image-number='imageNumber']").css("background-image"));</p>
  
  <pre><code>$("#display_div").css("background-image", $("div[data-image-number='imageNumber']").css("background-image"));
  </code></pre>
  
  <p>At this moment I look for every case via if clauses:</p>
  
  <pre><code>    if ( imageNumber == 1 )
      {
          $("#display_div").css("background-image", $("div[data-image-number='1']").css("background-image"));
      }
      if ( imageNumber == 2 )
      {
          $("#display_div").css("background-image", $("div[data-image-number='2']").css("background-image"));
      }
  </code></pre>
  
  <p>I need this to have a Timer which updates the background-image of the "display_div" via the variable "imageNumber", because the Images are fading one by one in the display and users shall have the option to click on a preview image, set the variable "imageNumber" to the position in the fading-row and the fading-row shall just work its way again. </p>
  
  <p>I fear/guess there is no syntax for this problem and I have to solve it another way or use the if-clauses am I right?</p>