Question

内容必须在触摸开始时取代＆amp;触控装置。一旦触摸被移除，我现在的代码变得正常。

首次触摸时，必须显示隐藏的内容（＆＃34; item-over＆＃34;）。在第二次触摸时，它必须显示（＆＃34; item-short＆＃34;）内容。在第三次触摸时，它显示＆＃34; item-over＆＃34;内容再次。

HTML

<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>

JS：

$('#'+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()
 });

Answer 1

编辑，更新（v2）

尝试

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

请参阅.toggle()

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

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

1 个答案: