Question

data MyArr a b where
  SId :: MyArr a b
  SRight :: MyArr a b -> MyArr b c -> MyArr a c
  SPure :: (a -> b) -> MyArr a b
  SPar :: MyArr a b -> MyArr c d -> MyArr (a,c) (b,d)

instance Category MyArr where
  id = SId
  (.) = SRight

instance Arrow MyArr where
  arr = SPure
  first s = SPar s SId

我对Javascript很新，但我正在努力学习。我知道这是jQuery但想知道是否有更快的方法来执行此代码，比如创建一个更小的函数，我可以调用它来显示/隐藏文本。

因为我将添加更多缩略图，而且我不想为照片上显示的每张照片和文字全部写出来。

Answer 1

您可以使用Multiple Selector绑定单个事件处理程序，在事件处理程序中使用当前元素this id属性创建目标选择器。

$('#thumbnail1, #thumbnail2, #thumbnail3').hover(function(){
    var selector='#thumbnailTitle'+ this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','visible');
}, function(){
    var selector='#thumbnailTitle'+this.id.replace(/[^\d.]/g,'');
    $(selector).css('visibility','hidden');
})

但是，我建议您使用自定义data-*前缀属性建立关系。这里的例子

＆＃13;

$('.thumbnail').hover(function() {
  $('#' + this.dataset.target).toggleClass('hidden');
}, function() {

  $('#' + this.dataset.target).toggleClass('hidden');
})

＆＃13;

.hidden {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="thumbnail" data-target="thumbnailTitle1">thumbnail 1</span>
<span class="thumbnail" data-target="thumbnailTitle2">thumbnail 2</span>
<span class="thumbnail" data-target="thumbnailTitle3">thumbnail 3</span>


<div class="hidden" id="thumbnailTitle1">thumbnailTitle1</div>
<div class="hidden" id="thumbnailTitle2">thumbnailTitle2</div>
<div class="hidden" id="thumbnailTitle3">thumbnailTitle3</div>

＆＃13;

Answer 2

以下是一个选项。

( function( $, window, undefined ) {

  var handle_mouse_events = function handle_mouse_events( thumbnail_selector, thumbnail_title_selector ) {
    
    $( thumbnail_selector ).mouseenter(
      function() {
        $( thumbnail_title_selector ).css( 'visibility', 'visible' );
      }
    );
    
    $( thumbnail_selector ).mouseleave(
      function() {
        $( thumbnail_title_selector ).css( 'visibility', 'hidden' );
      }
    );
    
  };
  
  handle_mouse_events( '#thumbnail1', '#thumbnailTitle1' );
  handle_mouse_events( '#thumbnail2', '#thumbnailTitle2' );
  handle_mouse_events( '#thumbnail3', '#thumbnailTitle3' );

} )( jQuery, this );

.image_container > div {
  display : inline-block;
  width : 150px;
  height : 200px;
}

span {
  visibility : hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_container">
  <div id="thumbnail1">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
    <span id="thumbnailTitle1">Title #1</span>
  </div>
  <div id="thumbnail2">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
    <span id="thumbnailTitle2">Title #2</span>
  </div>
  <div id="thumbnail3">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150" />
    <span id="thumbnailTitle3">Title #3</span>
  </div>
</div>

Answer 3

这样的事情：

function handleEventsFor(index) {
  $('#thumbnail' + index).mouseenter(function() {
    $('#thumbnailTitle' + index).css('visibility', 'visible')
  });
  $('#thumbnail' + index).mouseleave(function() {
    $('#thumbnailTitle' + index).css('visibility', 'hidden')
  })
}

并称之为：

handleEventsFor(1);
handleEventsFor(2);

或者像这样：

for(var i = 0; i < 5; ++i) {
  handleEventsFor(i);
}

Answer 4

我会为它编写一个简单的visibleHover插件。使用它将像这样工作

$(selectorForThumbnails).visibleHover(selectorForText);

或者如示例所示

// '.thumbnail' is the class of the parent elements
// 'span' is the selector for the children text elements
$('.thumbnail').visibleHover('span');

您可以自定义这些输入以匹配您拥有的任何HTML结构。

点击下面的运行代码段按钮，看它是否正常工作

(function($) {
  $.fn.visibleHover = function(selector) {
    return this.each(function(idx, elem) {
      $(elem).hover(
        function() { $(selector, elem).css('visibility', 'visible'); },
        function() { $(selector, elem).css('visibility', 'hidden'); }
      );
    });
  };
})(jQuery);
  
$('.thumbnail').visibleHover('span');

.thumbnail {
  float: left;
  margin-right: 10px;
}
.thumbnail .image {
  width: 100px;
  height: 100px;
  background-color: #eee;
}
.thumbnail span {
  visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
  <div class="image"></div>
  <span>Text A</span>
</div>
<div class="thumbnail">
  <div class="image"></div>
  <span>Text B</span>
</div>
<div class="thumbnail">
  <div class="image"></div>
  <span>Text C</span>
</div>

Answer 5

您也可以尝试这样做，

让我们说你的HTML

<div id="thumbnails">
   <div><img class="thumbnails" src="" /></div>
   <div><img class="thumbnails" src="" /></div>
   <div><img class="thumbnails" src="" /></div>
   <div><img class="thumbnails" src="" /></div>
</div>

Jquery的

 $(document).ready(function(){

    $("#thumbnails").find('.thumbnails').mouseenter(function(){
        var visibility = $(this).css('visibility');

        if(visibility == 'hidden'){
            $(this).css('visibility', 'visible');
        }
    });

    $("#thumbnails").find('.thumbnails').mouseleave(function(){
        var visibility = $(this).css('visibility');

        if(visibility == 'visible'){
            $(this).css('visibility', 'hidden');
        }
    });
});

Answer 6

通过 ID 进行引用（即$（＆＃39;＃thumbnailn＆＃39;））非常具体。您可以通过访问标记或其他属性（例如类）来制作更广泛的参考。

类似的东西：

<强> HTML：

<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle1"></span>...</div>
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle2"></span>...</div>
<div id="thumbnail1" class="thumbnails"><span id="thumbnailTitle3"></span>...</div>

<强> JavaScript的：

$(".thumbnails").mouseenter(function() {
    $(this).children("span").css('visibility', 'visible');
}).mouseleave(function() {
    $(this).children("span").css('visibility', 'hidden');
});

在上面的例子中，我展示了如何使用JQuery

Answer 7

如果您想使用行为定位类似的元素，请使用类而不是ID。

功能本身是正确的。问题是您已经为每个图像构建了具有唯一ID的HTML。尝试通过编写针对您的唯一ID的函数来解决问题是错误的方法，潜在的问题是您首先使用ID来定位元素。

$(document).ready(function() {

  $('.thumbnail').on('mouseenter', function() {
    $(this).find('.thumbnail-title').css('visibility', 'visible');
  })

  $('.thumbnail').on('mouseleave', function() {
    $(this).find('.thumbnail-title').css('visibility', 'hidden');
  })

});

在上面的代码段中，您可以看到选择了thumbnail类的每个元素。当用户将鼠标悬停在缩略图上时，您可以引用当前悬停的元素（使用$(this)）并找到包含类thumbnail-title的子元素。

这是在相同类型的元素之间共享行为的最简单方法。

这是一个工作小提琴：https://jsfiddle.net/wq5r97ep/2/

编辑：您当然可以将其抽象为插件或仅仅是一般功能。但这是基本的想法。

Answer 8

使用JQuery

 $('#thumbnail3').mouseleave(function(e)
        {
           $(e.target).hide();
        })

使用css。

#thumbnail3:hover {display:none}

Answer 9

将整个事物写入循环是一种选择。

for(var i = 1; i <= whatever_your_length_is; i++) {
  $('#thumbnail' + i).mouseenter(function() {
    $('#thumbnailTitle' + i).css('visibility', 'visible');
  };

  $('#thumbnail' + i).mouseleave(function() {
     $('#thumbnailTitle' + i).css('visibility', 'hidden');
  });
}

Javascript - 如何将其转换为简单的函数

9 个答案: