give each element style from html5 data object

give each element style from html5 data object

Hi there,

I have a problem right here, let me give you the HTML first:


  1. <div class="section_checkboxes group_checkboxes">
  2. <div class="col_checkboxes span_1_of_2">
  3. <img src="images/interactive-test/fibro-mann-front.png">
  4. <ul class="man_checkboxes">
  5. <li><label><input type="checkbox" data-top="-100" data-left="-59" name="front" value="1">
    Kiefer links</label></li>
  6. <li><label><input type="checkbox" data-top="-100" data-left="-5" name="front" value="1">
    Kiefer rechts</label></li>
  7. </ul>
  8. </div>
  9. </div>

Now what I want to achieve is that EACH <label> gets an image appended which will also get the CSS rules "left" and "top" with the correct value of "data-top" and "data-left".

My current js looks like this:

  1. checkboxes: function () {

                    var hotspot = $('<img src="images/test/test-stoerer.png" alt="Test" />'),

                        hotspot_img = new Image(),

                        section_checkboxes = $(".section_checkboxes"),

                        sectionListItems = section_checkboxes.find("li"),

                        hotspot_checkboxes = section_checkboxes.find('input[type="checkbox"]');

                    hotspot.addClass("stoererImg");

                    //// append img function

                    var hotSpotTrigger = function () {

                        $(sectionListItems).children().append(hotspot);

                        var hotspotPosition = $(".section_checkboxes").find("input"),

                            hotspotTop = parseInt(hotspotPosition.data("top")) + "px",

                            hotspotLeft = parseInt(hotspotPosition.data("left")) + "px";

                    };

                    hotSpotTrigger();

     

     

     

                } ///// end checkboxes

I am getting stuck on the "hotSpotTrigger function. My guess is that it has to be done somewhere in there, but I cant figure it out just yet so that every single img inside the <label> gets the specific css values of the sibling <input data-top data-left>

Hope someone knows an answer. Thanks!!