首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >JQuery:如何使用HTML ascii箭头作为切换指示器?

JQuery:如何使用HTML ascii箭头作为切换指示器?
EN

Stack Overflow用户
提问于 2010-04-23 14:33:53
回答 3查看 3.9K关注 0票数 2

我开始使用滑动开关( across this great JQuery example )。

我想完全按照原样实现它,除了一件事。

该示例使用图像作为向上和向下(白色)箭头指示器。

我不能使用HTML向上箭头(↑)和向下箭头(↓)而不使用图像。

如果是这样的话,是怎么做的?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-04-23 15:52:46

我相信像这样的东西应该是有效的:

代码语言:javascript
代码运行次数:0
运行
复制
$(".btn-slide").click(function(){
  $("#panel").slideToggle("slow");
  $(this).toggleClass("active");

  //Toggle text here (I may have the up/down order inverted)
  $(".btn-slide").toggle(function() {
      $(this).text('Slide ↑');
    }, function() {
      $(this).text('Slide ↓');
  });
  return false;
}); 

基本上,这个想法只是在点击时切换链接上的文本,也就是作者切换上/下幻灯片的位置。

有关toggle()的更多信息,请单击此处。

您还需要从此处删除白色背景图像:

代码语言:javascript
代码运行次数:0
运行
复制
.btn-slide  {
background:url("images/white-arrow.gif") no-repeat scroll right -50px 

HTH

票数 4
EN

Stack Overflow用户

发布于 2010-04-23 15:52:37

您可以更改锚点元素的文本值,如下所示。

代码语言:javascript
代码运行次数:0
运行
复制
$(".btn-slide").click(function(){  
    $("#panel").slideToggle("slow");  
    $(this).toggleClass("active"); return false;  
    $(this).text('YourText ' + ($(this).hasClass('active') ? '↑' : '↓'));
});    

删除箭头图像是通过删除.btn-slide选择器的CSS background属性来完成的。

票数 1
EN

Stack Overflow用户

发布于 2013-12-09 16:23:22

在我的例子中,我更喜欢使用属性.attr()

代码语言:javascript
代码运行次数:0
运行
复制
$(this).attr('value', '↑');

当使用firebug进行测试时,我使用.val().html(),在<input>将添加额外的</input>之后。这对我不起作用。

对不起,我的英语不好。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2696669

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档