javascript - Jquery Flippy插件多内容

Question

HTML：

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

J-查询：

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

我正在使用这个jquery 插件来实现翻转效果。我的问题是如何实现多个内容。目前该插件仅接受 1 个内容。

Answer 1

好吧，似乎开发人员已经做到了，所以每次您想应用新内容时都必须重新创建翻转的实例，因此您必须在处理程序中使其更通用一点.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)
• 至：verso: '<span id="cardtitle">' + content1 + ' </span><span id="cardinfo"> ' + content2 + '</span>'