Jquery触摸设备内容显示/隐藏

内容必须更换触控启动和触控设备。删除触摸后，我当前的代码将恢复正常

第一次触摸时，它必须在内容上显示隐藏项。第二次触摸时，它必须显示项目短内容。第三次触摸时，它会再次在内容上显示项目

HTML

用户提供的代码：

编辑，更新v2

试一试

看

var divId=第1项； $img+divId.ontouchstart，function{ $this.sides[id=+divId+-short]，[id=+divId+-over]。切换 } 默认内容 触摸屏上显示的内容

---

谢谢你的代码。。Span id切换必须基于id。当用户触摸时，必须触发切换功能。您当前的代码基于trigger.Hi.工作。。很抱歉再次打扰你。。在这里，我们动态地获取ID名称，如项目1、项目2、项目3。。等我们不能使用常量ID boss。Thanks@Venkiweb用$imgitem_1？Hi.动态替换$/*ID名称，如item_1、item_2、item_3*/。。我们在不同页面的大约50个元素中调用此函数。桌面版很好用。仅适用于触摸设备，我们无法使其类似于桌面。@Venkiweb在OP中仅显示4个元素？如果可能，可以发布完整的html、js吗？如果两个动态图像、跨距、工件的选择器都有效，则应在n-image touchstart事件中切换n-spans。要在桌面chrome/chrome上试一试，请尝试打开控制台->抽屉->模拟->传感器->模拟触摸屏。

<li>
  <img data-swap-image="images/ticked-small.png" data-ng-mouseleave="swapImageSrc()" data-ng-mouseenter="swapImageSrc()" alt="" src="images/tick.png" class="icon ng-scope" id="item_1">
  <span id="item_1-short" style="display: block;">Default content</span>
  <span style="display: none;" id="item_1-over">Content to display on touch</span>
</li>

$('#'+divId).on("touchstart", function() {
    $('#'+divId+'-short').hide();
    $('#'+divId+'-over').show();
});

$('#'+divId).on("touchend", function() {
    $('#'+divId+'-short').show();
    $('#'+divId+'-over').hide();
});

 $('img'+'#'+divId).on("touchstart", function(e) {
        $("[id$=short], [id$=over]").toggle()
 });

   var divId = "item_1";
   $("img#" + divId).on("touchstart", function(e) {
      $(this)
      .siblings("[id="+divId+"-short], [id="+divId+"-over]")
      .toggle()
   });