Jquery标签添加删除
Jquery Tab add remove
Tab 1不工作。表1是从MySQL表中绘制的。我想显示默认标签和添加或删除一个额外的标签和张贴mysql得到插入标签id追加不计数?你能帮忙吗?
访问jsfiddle jsfiddle.net/datakolay/33aM3/
Html <ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
<li id="t21" class="ntabs"> Tab Mysql id 21
<a href="" id="close21" class="close">×</a>
</li>
<li id="t22" class="ntabs"> Tab Mysql id 22
<a href="" id="close22" class="close">×</a>
</li>
</ul>
<div id="tabcontent">
<p id="c21">Test</p>
<p id="c22">Test</p>
</div>
Javascript $(function() {
var total_tabs = 0;
total_tabs++;
$("#addtab, #litab").click(function() {
total_tabs++;
$("#tabcontent p").hide();
addtab(total_tabs);
return false;
});
function addtab(count) {
var closetab = '<a href="" id="close'+count+'" class="close">×</a>';
$("#tabul").append('<li id="t'+count+'" class="ntabs">Tab Extra '+closetab+'</li>');
$("#tabcontent").append('<p id="c'+count+'">Tab Content </p>');
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#t"+count).bind("click", function() {
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
});
$("#close"+count).bind("click", function() {
// activate the previous tab
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+count).prev().fadeIn('slow');
$(this).parent().remove();
$("#c"+count).remove();
return false;
});
}
});
我的新EDİT访问jsfiddle jsfiddle.net/datakolay/33aM3/8/
$(function() {
$('#tabcontent p').hide().filter(':lt(1)').show();
$("#tabul li").removeClass("ctab");
$(".ntabs").filter(':lt(1)').addClass("ctab");
$("#addtab").click(function() {
$("#tabcontent p").hide();
var dataString = '';
$.ajax({
type: "POST",
url: "add_tab.php",
data: dataString,
cache: false,
success: function(html)
{
$("#tabul li").removeClass("ctab");
$("#t"+count).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+count).fadeIn('slow');
}
});
return false;
});
$(".ntabs").bind("click", function() {
var id = $(this).attr('id')
$("#tabul li").removeClass("ctab");
$(".ntabs").addClass("ctab");
$("#tabul li").removeClass("ctab");
$("#"+id).addClass("ctab");
$("#tabcontent p").hide();
$("#c"+id).fadeIn('fast');
});
$(".close").bind("click", function() {
var id = $(this).attr('id')
$("#tabul li").removeClass("ctab");
$("#tabcontent p").hide();
$(this).parent().prev().addClass("ctab");
$("#c"+id).prev().fadeIn('fast');
$(this).parent().remove();
$("#c"+id).remove();
return false;
});
您只能将事件侦听器添加到动态添加的选项卡中,即;表2,表3,表4…由于TAB 1是硬编码到HTML中,而不是动态加载,因此永远不会添加侦听器。虽然我想要添加大量的优化,但快速修复方法是添加。
$("#t1").bind("click", function() {
$("#tabul li").removeClass("ctab");
$("#t1").addClass("ctab");
$("#tabcontent p").hide();
$("#c1").fadeIn('slow');
});
我相信你的问题实际上是在你的HTML而不是你的JQuery。它似乎工作正常(据我所知),如果你修改你的html从这:
<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a>
<li id="t1" class="ntabs"> Tab 1<a href="" id="close1" class="close">×</a></li>
</li>
</ul>
<div id="tabcontent">
<p id="c1">Test</p>
</div>
:
<ul id="tabul">
<li id="litab" class="ntabs add"><a href="" id="addtab">+</a></li>
</ul>
<div id="tabcontent">
</div>
然后,我会对你的JQuery做一个小的调整,改变:var total_tabs = 1;
:var total_tabs = 0;
接下来,您需要处理JQuery处理关闭选项卡的方式。如果关闭第一个选项卡,则显示"+"选项卡。如果一个选项卡被关闭,而当前没有焦点,它会将焦点更改为已关闭选项卡的前一个选项卡。
参考我的建议。
编辑:我还想再介绍一件事。我的假设是,你将有一些方法来动态地添加内容到这些标签;鉴于此,我会动态添加第一个选项卡(就像我的建议那样),而不是将其硬编码到html中,因为您的JQuery已经适用于动态添加的选项卡(这意味着您在向静态选项卡添加侦听器时做了一些错误的事情)。这只是我的两分钱。
编辑2:要回答您关于如何从JQuery访问MySQL数据的问题,您应该真正谷歌JQuery get data from MySQL database
之类的东西。也就是说,您已经将PHP
添加到标记中,因此我们假设这就是您想要使用的。您需要通过JQuery构造一个AJAX调用来检索信息。此外,您还需要一个PHP脚本来与服务器交互。
<?PHP
$db_address = 'localhost';
$db_user= 'root';
$db_pass= 'password';
$db_name= 'TabData';
$db;
function connect() {
global $db, $db_server, $db_user, $db_password, $db_dbname;
if (!$db) {
$db = mysql_connect($db_server, $db_user, $db_password);
}
if (!$db) {
die('Could Not Connect: ' . mysql_error());
} else {
mysql_select_db($db_dbname);
}
}
function disconnect() {
global $db;
if ($db) {
mysql_close($db);
}
}
function query($query) {
global $db;
if (!$db) {
connect();
if ($db) {
return query($query);
}
} else {
$result = mysql_query($query);
return $result;
}
}
function getTabData($id) {
$result = query("SELECT * FROM tabs WHERE id = '"".$id."'"");
}
$data = array();
$json = file_get_contents('php://input'); // read JSON from raw POST data
if (!empty($json)) {
$data = json_decode($json, true); // decode
if(isset($data["id"]) && !empty($data["id"])) {
connect();
getTabData($data["id"]);
disconnect();
}
?>
基本上,该代码将连接到一个名为TabData
的数据库,并以JSON形式返回表tabs
中的行信息,其中包含在AJAX查询中传递的ID匹配。
用于创建对上述PHP代码(包含在名为myPHP.php的文件中)的AJAX调用的JQuery:
function updateTab(tabID) {
$.ajax({
type: "POST",
url: "/myPHP.php",
contentType: "application/json",
data: JSON.stringify({id: tabID}),
success: function (data) {
var tabData = $.parseJSON(data);
$.each($.parseJSON(data), function() {
$("#c" + this.id).html("" + this.info);
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log("Error: " + "'nXMLHttpRequest status: " + XMLHttpRequest.status + "'nXMLHttpRequest statusText: " + XMLHttpRequest.statusText + "'ntextStatus: " + textStatus + "'nerrorThrown: " + errorThrown);
}
});
}
基本上,该代码将连接到一个名为myPHP.php
的php脚本,并发送一个带有传入ID的ID的AJAX查询。成功返回请求后,success
函数将返回,它解析PHP脚本返回的数据,并更新相应id的内容页。我还没有测试这段代码(因为我没有现成的环境);但是它是我从现有的代码中稍微修改的代码(因此,它应该不需要太多的调整就可以工作)。
- 删除添加行
- 删除添加的事件侦听器
- 删除添加的输入字段
- 如何在 fabricjs 中从画布中删除添加的模板
- 删除添加空值的 Javascript 对象项
- .append() 删除添加的元素
- Javascript/jQuery - 根据数值删除/添加多个元素的类
- 单击时添加几行,双击删除添加的行
- 从表单中删除添加的元素不起作用
- 当我在单击元素外部时,如何删除添加到单击元素的功能
- 从javascript数组内的对象中删除/添加特定变量
- 如何使用单击hypelink从表单输入文本字段中删除/添加属性
- 想要在单击删除链接时删除添加到缩略图中的图像
- TinyMCE 4删除/添加所有图像的属性
- 当一天的开始和结束时间改变时,删除/添加正确的
's - 使用JavaScript删除添加到选定文本的高亮
- 删除/添加类函数
- 删除/添加一个类,然后在这个新类上执行一个事件
- TinyMCE插件-如何删除添加的代码
- 使用jquery删除/添加类到正文