如何通过单击显示数组和按钮？

-2

我有按钮一个简单的表：<button class='btn btn-info' href='#'>More</button>，我需要的是，当通过“更多”按钮，然后阵列用户点击（$记录，例如）和“少”按钮，将下的“更多”按钮被显示。例如，$records[0]="1", $records[1]="2"。请，我不太了解JavaScript和JQuery，但我需要使用Ajax来完成。所以，我非常需要你的帮助。谢谢。如何通过单击显示数组和按钮？

UPDATE：

$("button.btn-info").click(function() { 
    alert('click'); 
});

它的代码由“更多按钮”点击，但我不知道如何将这个按钮下方写$记录阵列与“少”按钮（这将隐藏数组通过点击）结束。

来源

2012-06-30 user1477886

嗯...'ID =“5”'说，按照最新的JQuery释放.live功能已被弃用，？ – elclanrs

哦，对不起。我忘记了ID。我需要所有的buttos是一个类的成员，但取决于点击的按钮，用户将看到不同的阵列 – user1477886

你想在哪里显示更多“细节”？你可以写更多或显示快照 –

PHP（样品只）：

<?php 
    $records = array(1,2,3,4,5,6,7); 
?>

HTML：

<html> 
<body> 
<div id="more"> 
    <button>More</button> 
</div> 
<div id="less" style="display: none;"> 
    <div id="codes" style="border-top: 1px dotted #d0d0d0;"> 
     <?php 
      for($i=0; $i<count($records); $i++) { 
       printf("$records[%d] = %d<br />",$i,$records[$i]); 
      } 
     ?> 
    </div> 
</div> 
</body> 
</html>

JS：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var i = 1; 
    $('div#more button').click(function() { 
     $('div#less').toggle(); 
     if (i) { $(this).html('Less'); i=0; } else { $(this).html('More'); i=1; } 
    }); 
}); 
</script>

P.S.不要忘记包含jQuery插件，否则这将无法工作。

编辑：在那里，它是jquery.min.js

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

来源

2012-06-30 08:36:56

也请加上“少”按钮。你忘了它。 – user1477886

@ user1477886点击时，More'按钮被替换为'Less'，你不喜欢它吗？ –

您可以使用jQuery这一点，下面是一个粗略的例子假设：所有的按钮有一个ID（通过读取数据需要AJAX）中，你有按钮的表格单元格，还具有与显示样式为隐藏和类作为“dataspan”

 $('.btn-info').live('click',function(){ 
      var id = $(this).attr('id'); 
      $.ajax({ 
        type : "POST", 
     url: "YOUR TARGET URL", 
        dataType : "HTML",//you can also use JSON 
        data  : 'id=' + id, 
      success: function(data) 
      { 

         $(this).siblings('.dataspan').html(data); 
         $(this).siblings('.dataspan').append('<button class="hidedata" value="HIDE"/>'); 
         $(this).siblings('.dataspan').show(); 
      } 
    }); 
     }); 

//FOR hiding the data 
$('.hidedata').live('click' , function(){ 
     $(this).siblings('.dataspan').hide(); 
});

请注意，如果您使用的是最新的版本，我会强烈建议您切换到委托功能

来源

2012-06-30 08:42:08 Vedant

如何通过单击显示数组和按钮？

回答

相关问题