让我们把它变成代码审查

Question

我想基于if条件执行该函数但它不起作用。请建议。

$('toggle').each(function(i, e) {
  $('toggle').on('click', function() {
    var selectedid = $('toggle').attr('id');

    if (selectedid == 'Test-selected_' + i) {
      $(this).html('Test').attr('id', '')
        .append("").removeClass('tested');
    } else {
      $(this).html('Tested').attr('id', 'Test-selected_' + i).addClass('tested')
        .append("<span class='toggle-selected'></span>").css('padding', '8px 52px 8px 13px !important;');
    }
  });
});

<a href="#" target="_top" id="Test-selected_1" class="toggle clearboth tested" data-upc-tooltip-type="none" title="">Test<span class="toggle-selected"></span></a>

Answer 1

var selectedid =  $('toggle').attr('id');
/* ... */
$('toggle').on('click', function(){

应该是

 var selectedid =  $(this).attr('id');
/* ... */
$(this).on('click', function(){

甚至更好，

 var selectedid =  this.id;

最后一个更好的原因是本机javascript几乎总是更快。如果执行$(this)，则将this放入jquery函数（将其转换为jquery对象）。然后，您使用attr()循环浏览属性，直到它们为id。 this.id不执行任何操作，只会为您提供this的ID。

让我们把它变成代码审查

第1轮

// it's {class}toggle, so (.toggle):
$('.toggle').each(function(i, e) {
  // this has to be 'this', in the each() jloop of jquery, every itteration is one of the elements
  $(this).on('click', function() {
    // you can use the this-> $(this).attr('id'), or even better
    var selectedid = this.id;

    if (selectedid == 'Test-selected_' + i) {
      // if you chain element (which is fine), newline every action to make it more obvious.
      $(this)
        .html('Test')
        .attr('id', '')
        .append("")
        .removeClass('tested');
    } else {
      // if you chain element (which is fine), newline every action to make it more obvious.
      $(this)
        .html('Tested')
        .attr('id', 'Test-selected_' + i)
        .addClass('tested')
        .append("<span class='toggle-selected'></span>")
        .css('padding', '8px 52px 8px 13px !important;');
    }
  });
});

第2轮

$('.toggle').each(function(i, e) {
  $(this).on('click', function() {
    //var selectedid = this.id; // as we now already have the id value accessable via this.id, we don't need a variable for it

    if (this.id == 'Test-selected_' + i) {
      $(this)
        .html('Test')
        // DONT! change the value if an ID unless you are absolutaly sure you have to.
        // Instead, you can set a data-tested="example" value in html, of via JS:
        .data('tested', '') 
         // Append will be called EVERY TIME. If you do append(""), you will NOT undo the previous append. 
        // .append("") // Append does something like { this.content = this.content + $inputValue }, it'll just add
        // .removeClass('tested') // You can select your elements now via 'toggle[data-tested=""]'
    } else {
      $(this)
        .html('Tested')
        // DONT! change the value if an ID unless you are absolutaly sure you have to.
        // Instead, you can set a data-tested="example" value in html, of via JS:
        .data('tested', 'Test-selected_' + i)
        .append("<span class='toggle-selected'></span>")
        .css('padding', '8px 52px 8px 13px !important;');
    }
  });
});

第3轮

$('.toggle').each(function(i, e) {
  $(this).on('click', function() {
    if (this.id == 'Test-selected_' + i) {
      // Because it is small now, oneline
      $(this).html('Test').data('tested', '') 
    } else {
      $(this)
        // the rest is now commented of, so oneline
        .html('Tested').data('tested', 'Test-selected_' + i)
        // Every time you loop through this, the span below get appended. EVERY time, so that means multiple spans.
        // Instead, remove this from javascript, and add it to your html and use css to show/hide it
        // .append("<span class='toggle-selected'></span>") 

        //.css('padding', '8px 52px 8px 13px !important;'); // NO JAVASCRIPT STYLING! Use css
    }
  });
});

.toggle{
  padding: 8px 52px 8px 13px !important;
}
.toggle[data-tested=""]{
  padding: 1px; /* here your default styling which I dont know right now */
}
.toggle[data-tested=""] .toggle-selected{
  display: none;
}

第4轮

$('.toggle').each(function(i, e) {
  $(this).on('click', function() {
    if (this.id == 'Test-selected_' + i) {
      $(this).html('Test').data('tested', '') 
    } else {
      $(this).html('Tested').data('tested', 'Test-selected_' + i)
    }
  });
});

因为你已经标记了答案，imma就在这里停下来。但这应该可以，但你可以改善很多。

Answer 2

正确的代码应该是这样的

$('toggle').each(function(i, e){
    $(this).on('click', function(){

    var selectedid =  this.id;


    if(selectedid == 'Test-selected_' + i){
        $(this).html('Test').attr('id', '')
        .append("").removeClass('tested');
    }else{
        $(this).html('Tested').attr('id', 'Test-selected_' + i).addClass('tested')
        .append("<span class='toggle-selected'></span>").css('padding', '8px 52px 8px 13px !important;');
    }
    });
});

Answer 3

您使用附加事件处理程序的选择器不正确，因为您使用的是类前缀.，即$('.toggle')
您不需要.each()来附加事件处理程序
您可以使用hasClass('tested')，并执行条件操作。

＆＃13;

$('.toggle').on('click', function(e) {
  e.preventDefault();
  var self = $(this);
  if (self.hasClass('tested')) {
    self.html('Test')
      .removeClass('tested');
  } else {
    self.html('Tested')
      .addClass('tested')
      .append("<span class='toggle-selected'></span>")
      .css('padding', '8px 52px 8px 13px !importan;');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" target="_top" id="Test-selected_1" class="toggle clearboth" data-upc-tooltip-type="none" title="">Test</a>

＆＃13;

如果条件在每个函数中都不起作用

3 个答案:

让我们把它变成代码审查

第1轮

第2轮

第3轮

第4轮