Question

我正在尝试创建一种显示/折叠动态添加内容的工作方式。我使用rel标签来检测应该显示的索引和描述大小。我已经包含了我的例子，使我的问题更容易理解。但是，我的解决方案不起作用，因为它最终只显示“完整”文本版本。

以下是我的示例

的链接

或代码在

之下

HTML：

<span id="11_fulltext" rel="11"><p> full text area </p>
  <a href="#" class="switch" rel="big">Toggle</a>
</span>

<span id="11_smalltext" rel="11">
  <p> small text area</p>
  <a href="#" class="switch" rel="small">Toggle</a>
</span>

Jquery（onload）：

$(".switch").click(function(e){
  e.preventDefault();
  var index=$(this).closest('span').attr('rel');
  var bigorsmall=$(this).attr('rel');

  alert(index+bigorsmall);
  if(bigorsmall="big"){
    $('#'+index+'_fulltext').hide();
    $('#'+index+'_smalltext').show();    
  }

  if(bigorsmall="small"){
    $('#'+index+'_smalltext').hide();  
    $('#'+index+'_fulltext').show();
  }
});

使用这样的rel标签好吗？感谢您提供任何帮助或建议！

Answer 1

检查你的代码，

if(bigorsmall="big"){

永远是真实的（你错过了一个额外的=符号）

if(bigorsmall=="big"){

第二部分相同

if(bigorsmall="small"){应为if(bigorsmall=="small"){

Answer 2

这比你想象的容易得多。 Here is an updated Fiddle.

<强> HTML：

<span>
    <p>full text area</p>
    <a href="javascript:;" class="switch">Toggle</a>
</span>
<span>
    <p>small text area</p>
    <a href="javascript:;" class="switch">Toggle</a>
</span>

<强> JS

$(document).on('click', '.switch', function() {
    $(this).prev().toggle();
});

此解决方案与动态添加该格式的新文本区域兼容。使用$(document).on('click', '.switch'可以捕获附加侦听器后创建的元素上事件的点击次数。 See jQuery .on() docs.

编辑更新了小提琴以动态创建新的可切换内容块

Answer 3

您要做的就是新HTML 5数据属性的用途。您可以附加到这样的元素：

<a href="#" class="switch" data-size="big">Toggle</a>

然后像这样访问：

var bigorsmall=$(this).data('size');

即使您使用的是较旧的浏览器，这种方法仍然可以使用JQuery，但不是100％肯定。

改变这个：

if(bigorsmall="big"){
if(bigorsmall="small"){

就像@Aknosis所提到的那样，以及：

if(bigorsmall=="big"){
if(bigorsmall=="small"){

你需要双等于比较。

Answer 4

小而大看起来像是东西，所以我只想为它添加一个类。

您应该使用data-attributes：

<span id="11_fulltext" data-index="11"><p> full text area </p>
    <a href="#" class="switch big">Toggle</a>
</span>
<span id="11_smalltext" data-index="11">
    <p> small text area</p>
    <a href="#" class="switch small">Toggle</a>
</span>

您可以通过执行以下操作检索.data()属性：

$(element).data('index');

PS

这不会按预期工作：

if(bigorsmall="big"){

应该是：

if(bigorsmall=="big"){

你会得到的是：

$(".switch").click(function(e){
    e.preventDefault();

    var a = $(this);

    var index = a.closest('span').data('index');

    if(a.hasClass('big')) {
      $('#'+index+'_fulltext').hide(); // is an id starting with a number valid???
      $('#'+index+'_smalltext').show();    
    } else {
      $('#'+index+'_smalltext').hide();  
      $('#'+index+'_fulltext').show();
    }
});

使用jquery隐藏/显示动态添加内容的最佳方法

4 个答案: