如何更改div的html并向其中添加动态内容

Question

I have a slider working with images and variables set that grab data from that slide. That data is manipulated by me to create certain functionality.

I currently have a set of images that move across(slider) on my body of the page I have a social bar that is always foxed to the right of the page.

What I am trying to do is grab the data and change the urls, and text inside the social buttons each time the slide is changed using the callback function provided by the slider. Here is my code:

var $mainContainer = $('div#container');
  var $tmbContainer = $('.rsThumbsContainer');
  var $tmbContainerT = $('.rsThumbsContainer').find('.rsThumb');
  var $slider = $('#gallery-t-group');
  var $body = $('body');
  var $close = $('<div id="close"><p class="icon-close"></p></div>');        

$tmbContainerT.each(function () {
      //console.log(slider.currSlide);
        $(this).on('click', function(event) {       
            $('body').addClass('rsSlider-active');
            sliderR();
            var $gallery = $('#gallery-t-group').find('.portfolio');

            $gallery.each(function () {
                var src = this.href;
                var content = $(this).find('.perma_link').val();
                var textContent = $(this).find('img').attr('alt'); // same as $(this.element).attr("title"); before you modify it using this.title +=
                var image = $(this).find('img').attr('src'); // this is the URL of the thumbnail
                var imageAlt = $(this).find('img').attr('alt');
                var $tumbl = $(this).find('a.tumbl-button');
                $tumbl.attr("href","http://www.tumblr.com/share/photo?source="+ encodeURIComponent(image) +"&caption="+ encodeURIComponent(textContent) +"&clickthru="+ encodeURIComponent(content) +"");

                slider.ev.on('rsAfterSlideChange', function(event) {
                $('#twit').html('<div id="twitter" data-url="'+content+'" data-text="'+textContent+'"></div>');
            $('#twitter').attr("data-url",content);
            $('#twitter').attr("data-text",textContent);
            $('#twitter').sharrre({
                    share: {
                        twitter: true
                    },
                    template: '<a class="box" href="#"><div class="count" href="#">{total}</div><div class="share"><span></span>Tweet</div></a>',
                    enableHover: false,
                    enableTracking: true,
                    buttons: { twitter: {via: '_JulienH'}},
                    click: function(api, options){
                        api.simulateClick();
                        api.openPopup('twitter');
                    }
                });
            });

            });
            slider.updateSliderSize(true);
        });

      });

This is where all my social buttons get added:

<div class="socialbar-vertical">
<div id="socio-box">
<div id="twit"></div>
  <div id="facebook" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)"></div>
  <div id="googleplus" data-url="http://sharrre.com/" data-text="Make your sharing widget with Sharrre (jQuery Plugin)"></div>
</div>
</div>

Currently this is all I have that changes the content of a div but it always uses the first clicked div:

$('#twit').html('<div id="twitter" data-url="'+content+'" data-text="'+textContent+'"></div>');

what I want to do is keep changing the attr's of that div everytime the slide changes.

Am I doing something completely wrong here or missing a trick?

Answer 1

a.) Why dont you just store the #twit.attr before you replace the div and then assign the value after replacement.

//Make a copy of all attributes of #twit
//TODO Replace #twit
//TODO set all attributes to the new #twit

b.) Another option is to stop replacing #twitter completely and instead re-using it (including its children). Might be less resource consuming.