Question

我正在寻找优雅的方法来避免编写如此多的代码来执行onclick，show clicked，隐藏其他代码。

这里的代码我正在使用：

HTML：

<p align="center" style="font-size: 22px;">
  <span class="badge badge-secondary" id="yesterday"><a href="#" style="color: inherit;">Yesterday</a></span>
  <span class="badge badge-dark" id="today"><a href="#" style="color: inherit;">Today</a></span>
  <span class="badge badge-secondary" id="tomorrow"><a href="#" style="color: inherit;">Tomorrow</a></span>
</p>

jquery的：

  $('#yesterday').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
    $('.yesterday').slideDown('slow');
    $('.today,.tomorrow').slideUp('1000');
  });
  $('#today').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
    $('.today').slideDown('slow');
    $('.yesterday,.tomorrow').slideUp('1000');
  });
  $('#tomorrow').click(function(e) {
    e.preventDefault();
    $(this).addClass('badge-dark').removeClass('badge-secondary');
    $('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
    $('.tomorrow').slideDown('slow');
    $('.yesterday,.today').slideUp('1000');
  });

Answer 1

要做到这一点：

在这三个元素（例如.yesterday）
同时使用.today，.tomorrow和slide-target元素上的课程（例如click）。
在班级

this

在处理程序中，$('.slide-target')是您要显示的元素，其兄弟姐妹（请参阅siblings）是您要隐藏的元素
在处理程序中，.filter('.' + this.id)是所有目标，然后您可以使用.not('.' + this.id)仅定位此元素的目标， <a href="#" style="color: inherit;">Yesterday</a> <a href="#" style="color: inherit;">Today</a> <a href="#" style="color: inherit;">Tomorrow</a> 定位其他元素

粗略地说：

$('.show-hide').click(function(e) {
  e.preventDefault();
  // Just to avoid doing it repeatedly
  var $this = $(this);
  // Add this class
  $this.addClass('badge-dark').removeClass('badge-secondary');
  // Remove it from siblings
  $this.siblings().addClass('badge-secondary').removeClass('badge-dark');
  // Find the target elements
  $('.slide-target')
    .filter('.' + this.id).slideDown('1000').end() // Slide down related
    .not('.' + this.id).slideUp('1000')            // Slide up others
  // Slide down the relevant element(s)
});

和

var random_1 = Math.floor((Math.random() * 1000) + 200);
var random_2 = Math.floor((Math.random() * 1000) + 200);

function result(){

    if (random_1 > random_2) {
        $("#result").html("A won");
        return;
    }

    else {
        $("#result").html("b won")
    }



}

$("#start").click(function(){
    $("#car_1").animate({"left":screen.width - 150},random_1,result());
    $("#car_2").animate({"left":screen.width - 150},random_2);

   random_1 = Math.floor((Math.random() * 1000) + 200);
   random_2 = Math.floor((Math.random() * 1000) + 200);
});

$("#reset").click(function(){
    $("#result").html("");
    $("#car_1").removeAttr("style");
    $("#car_2").removeAttr("style");
});

Answer 2

简单提取常用逻辑以分离函数：

function updateClasses(element, selector) {
    element.addClass('badge-dark').removeClass('badge-secondary');
    $(selector).addClass('badge-secondary').removeClass('badge-dark').slideUp('1000');
}

$('#yesterday').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#today,#tomorrow');
    $('.yesterday').slideDown('slow');
});
$('#today').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#yesterday,#tomorrow');
    $('.today').slideDown('slow');
});
$('#tomorrow').click(function (e) {
    e.preventDefault();
    updateClasses(this, '#yesterday,#today');
    $('.tomorrow').slideDown('slow');
});

Answer 3

这样的事情：

$('#yesterday, #today, #tommorow').click(function(e) {

      e.preventDefault(); 
      $(this).addClass('badge-dark').removeClass('badge-secondary');

      if ( $(this).is("#yesterday") ) {

        $('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
        $('.yesterday').slideDown('slow');
        $('.today,.tomorrow').slideUp('1000');

      } else if ( $(this).is("#today") ) {

        $('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
        $('.today').slideDown('slow');
        $('.yesterday,.tomorrow').slideUp('1000');

      } else if ( $(this).is("#tomorrow") ) {

        $('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
        $('.tomorrow').slideDown('slow');
        $('.yesterday,.today').slideUp('1000');

      }

    });

Answer 4

我无法想到更简单的方法：

使用您的班级badge作为.click()功能的选择器。
使用$(this)更改所点击元素的类，使用$('.badge').not($(this))定位所有其他类。
根据您点击的元素，显示要显示的班级名称。
与第2点相同，以显示/隐藏所需元素。

这是一个工作片段，我在其中添加了一些样式：

$('.badge').click(function(e) {
  e.preventDefault();
  $('.badge').not($(this)).removeClass('badge-dark').addClass('badge-secondary'); // Resets all except…
  $(this).removeClass('badge-secondary').addClass('badge-dark');                  // … the one clicked
  var classToShow = '.' + $(this).attr('id');                                     // Get this id
  $('.days').not(classToShow).slideUp('1000');                                    // Hide all except…
  $(classToShow).slideDown('slow');                                               // … the one wanted
});

p {
  font-size: 22px;
}

.badge-secondary {
  opacity: 0.5;
}

.badge a {
  color: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p align="center">
  <span class="badge badge-secondary" id="yesterday"><a href="#">Yesterday</a></span>
  <span class="badge badge-dark" id="today"><a href="#">Today</a></span>
  <span class="badge badge-secondary" id="tomorrow"><a href="#">Tomorrow</a></span>
</p>

<p class="days yesterday">Yesterday…</p>
<p class="days today">Today…</p>
<p class="days tomorrow">Tomorrow…</p>

希望它有所帮助！

避免写这么多的优雅方式（点击隐藏显示）

4 个答案: