Javascript显示更多按钮
Javascript Show More Button
当有人按下"显示更多"以获取按钮的id时,如果id以"Show_More_id_"开头以获取id的编号,然后使类为"Box_Show_id_
示例ID/Class:
<div class="Box_Show_ID_1"></div>
<input type="button" id="Show_More_ID_1" value="Show More" />
这是我现在制作的代码,但不起作用。。。
http://jsfiddle.net/UPdmH/
http://jsfiddle.net/UPdmH/2/
基本上,你是从错误的索引中获取id的
var Box_Data_ID = ID_Split[3];
fiddle:http://jsfiddle.net/UPdmH/3/
$(document).ready(function(){
var Box_Data_MSG_1 = "Show More";
var Box_Data_MSG_2 = "Show Less";
var Box_Data_Height = "117px";
$("input[id*='Show_More_ID_']").click(function() {
var Box_ID = $(this).attr("id");
var ID_Split = Box_ID.split('_');
var Box_Data_ID = ID_Split[ID_Split.length-1];
var Box = ID_Split[2];
var Button_Value = $('#Show_More_ID_' + Box_Data_ID).attr("value");
if(Button_Value == Box_Data_MSG_1) {
$('#Show_More_ID_' + Box_Data_ID).attr('value', Box_Data_MSG_2);
}
});
});
这个Show more/less演示怎么样?演示http://jsfiddle.net/yeyene/uEXvk/1/
var orgContent = $('.excerpt').html();
var txtContent = $('.excerpt').text().substr(0, 50) + '... <a id="morelink">more</a>';
$('.excerpt').html(txtContent);
$("body").on("click", '#morelink', function(){
$('.excerpt').html(orgContent);
$('<a id="lesslink"> less</a>').appendTo('.excerpt');
});
$("body").on("click", '#lesslink', function(){
$('.excerpt').html(txtContent);
});
似乎比实际需要的更复杂。看看这个。我修改了您的HTML,添加了一个jQuery库(您将其标记为JavaScript,但正在编写jQuery),并添加了click()函数:
http://jsfiddle.net/qTNzc/
$('.btn').click(function(){
this_id = $(this).attr('id');
$('.Box_Show_ID_'+this_id).toggle();
});
JSFiddle并没有真正指示您想要显示更多按钮的内容,如果它是一个链接,或者它应该显示另一个div
如果您将id更改为ShowMoreID_1,这将使其更容易:
$('button').click(function(e) {
e.preventDefault();
var val = $(this).attr('id');
var str = val.split('_');
if(str[0] == 'ShowMoreID') {
var id = str[1];
// do stuff
} else {
// dont do stuff
}
});
更新为包含jQuery库。我把它调整成了我认为你想做的:
http://jsfiddle.net/ZQ3pD/2/
相关文章:
- Jquery/Javascript:通过按下按钮显示数组中的随机图像
- 类似FB的按钮显示在页面上,但不会在同一页面上弹出
- 单击javascript按钮显示/隐藏Div元素
- 单击按钮显示不同的文本,重复第一个文本
- C3.js通过单击按钮显示工具提示
- 单击按钮显示重新单击消失
- 点击浏览器的“后退”按钮显示的是JSON而不是HTML(使用Rails和d3.js)
- 尝试从单选按钮显示的JSON数组中调用多个对象
- 在youtube视频中单击按钮显示图像
- 使用HTML和Javascript,使用4个单选按钮显示和隐藏输入字段
- 如何在javascript中使两个按钮显示在一起
- 如何使用按钮显示/隐藏潜水
- 使用不起作用的按钮显示和隐藏
- facebook点赞按钮显示数以万计的点赞
- 流星:点击按钮显示一些东西
- jQuery按钮显示/隐藏类,如果存在类
- 如何让我的 ckEditor 菜单按钮显示在两行而不是四行上
- 如何让我的移动菜单按钮显示和隐藏导航栏,以及在负空间中单击时隐藏
- 网格中的拆分按钮显示在行后面 - 剑道 UI
- Dijit 按钮显示图标,但不以编程方式显示标签