Jquery flippy插件多内容

Question

HTML：

 <div class ="cards">
      <span id="cardtitle">
      </span>
      <span id="cardinfo">
      </span>
    </div>

J-QUERY：

function build() {
  var content1 = "Coolio";
  var content2 = "Coolio";
  $(".cards").flippy({
    color_target: "#F8F8F8",
    duration: "500",
    verso: $("#cardtitle").text(content1)
    // another instance of verso here to add content2
});
}

我正在使用this jquery插件进行翻转效果。我的问题是如何实现多个内容。目前插件只接受1个内容。

Answer 1

好吧，看起来开发人员已经做到这一点，所以每次你想要apply new content时都必须重新创建翻转的实例，所以你必须让它更加通用在.click()处理程序中。

依赖于您点击的按钮或导航，请求它加载已标记的相应内容，例如：

<div id="content-one" style="display: none;">
      Some first Example text
</div>

<div id="content-two" style="display: none;">
      Second Example Text
</div>

<input type="button" 
       class="updateflip" 
       value="Display Content One" 
       data-contenttext="content-one" />

<input type="button" 
      class="updateflip" 
      value="Display Content Two" 
      data-contenttext="content-two" />

<script>
    $(document).on('click', '.updateflip', function( event ) {
        $('.cards').flippy({
            color_target: "#F8F8F8",
            duration: "500",
            verso: $('#'+ $(this).data('contenttext') +'').text()
            //E.g. $('#content-one').text(); shows "Some first Example text"
        });
    });  
</script>

演示小提琴： http://jsfiddle.net/8TQFb/

点击一个.updateflip类后，它会查看它的data-contenttext属性，该属性又会指向页面中隐藏的<div />，从而显示隐藏的文字。您可以在data-*属性中使用不同颜色进一步应用此选项：

<input type="button" 
      class="updateflip" 
      value="Display Content Two" 
      data-color-target="#f1f1f1"
      data-speed="2100"
      data-contenttext="content-two" />

因此，将这些按钮特定的相关属性传递到.updateflip处理程序中，以创建类似于以下演示中的内容：

演示小提琴：http://jsfiddle.net/Hx5uQ/

Answer 2

对不起伙计们，我让它上班了。该插件确实需要多个元素。这是我的误解。

var content1 = "Coolio";
var content2 = "Coolio";
$(".cards").flippy({
    color_target: "#F8F8F8",
    duration: "500",
    verso: '<span id="cardtitle">' + content1 
           + ' </span><span id="cardinfo"> ' + content2 + '</span>'
});

我改变了：

• verso: $("#cardtitle").text(content1)
• to：verso: '<span id="cardtitle">' + content1 + ' </span><span id="cardinfo"> ' + content2 + '</span>'