0

そのスライドからデータを取得する画像と変数セットを操作するスライダーがあります。そのデータは、特定の機能を作成するために私によって操作されます。

私は現在、ページの本体に移動する一連の画像(スライダー)を持っています。ページの右側に常に表示されるソーシャルバーがあります。

私がやろうとしているのは、スライダーによって提供されるコールバック関数を使用してスライドが変更されるたびに、データを取得して URL とソーシャル ボタン内のテキストを変更することです。これが私のコードです：

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);
        });

      });

これは、すべてのソーシャル ボタンが追加される場所です。

<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>

現在、divのコンテンツを変更するのはこれだけですが、常に最初にクリックされたdivを使用します:

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

私がやりたいことは、スライドが変更されるたびに、その div の属性を変更し続けることです。

ここで何か完全に間違っているのでしょうか、それともトリックを見逃していますか?

4

1 に答える 1

0

a.) div を置換する前に #twit.attr を保存し、置換後に値を割り当てないのはなぜですか。

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

b.) もう 1 つのオプションは、#twitter を完全に置き換えるのをやめ、代わりに (その子を含めて) 再利用することです。リソースの消費が少ない可能性があります。

于 2013-07-16T14:38:18.620 に答える