선택 상자 값을 기반으로 일부 선택기 클래스 조작

Question

사용자 정의 jquery 플러그인을 수정하려고합니다. 나는 here 전에 이것을 요구했다. 이전 문제가 해결되었습니다. 이제는 플러그인을 좀 더 유연하게 만들고 싶습니다. 그래서 하드 코딩 된 오래된 클래스에 의존하는 대신 클래스의 값을 기반으로 클래스를 동적으로 변경하는 선택 상자의 값 배열에 의존하려고합니다. 내가이 일을하는 이유는 선택 옵션을 클릭하기 전에 클래스가 거기에 있지 않기 때문입니다. 때로는 다른 선택자에 대해서도 그렇습니다.

내가 달성하기 위해 노력하고 무엇을 더 말을하려면 선택기 클래스가

경우 선택 상자의 값 중, 최신 선택한 값에 따라,이 클래스를 제거하는 새로운 클래스를 추가 할 수 있습니다.

그래서 여기에서 최신 코드 :

$.fn.classSwitcher = function(options) { 
    var baseOptions = { 
    classTarget: 'body', 
    newClass: '' 
    }; 

    var options = $.extend(baseOptions, options); 

    var allVals = []; 

    return this.find('option').each(function() { 
    //retrieve all select box values 
    allVals.push($(this).val()); 

     $(this).click(function() { 
      var t = $(this); 
      var newClass = (options.newClass) ? options.newClass : t.val(); 

      // Is it okay to do hasClass to array values? 
      if ($(options.classTarget).hasClass(allVals)) { 
      $(options.classTarget).removeClass(allVals).addClass(newClass); 
      } 

      // problem here I guess, can not update the old class with the one 
      allVals = newClass; 

      $.cookie('cookieNewClass', newClass, { expires: 1 }); 
      //alert('New Class: ' + $.cookie('cookieNewClass')); // produced expected new class 
      //alert(allVals); // produced expected new classes 

    }); 
}); 
}; 

이 클래스가 추가되지만 이전 질문처럼, 나는 대상 클래스가 새 것으로 교체 얻을 업데이트 할 수 없습니다. 다른 문제에 대해서는 코드의 주석을 참조하십시오.

가하고 해결하는 경우 :

어떤 힌트는 대단히 감사하겠습니다이 DUP 표시 주시기 바랍니다. 감사합니다

Answer 1

$.fn.classSwitcher = function(options) { 
var baseOptions = { 
    classTarget: 'body' 
}; 

    var options = $.extend(baseOptions, options); 

var allVals = this.find('option').map(function(){ 
    return $(this).val(); 
}); 
var target = $(options.classTarget); 

this.change(function(){ 
    var t = $(this); 
    var newClass = t.val(); 
    target.removeClass(allVals.get().join(' ')).addClass(newClass); 
}); 
}; 
$('select.changer').classSwitcher(); 

HTML :

<select class="changer"> 
<option value="apple-80">apple-80</option> 
<option value="apple-100">apple-100</option> 
<option value="apple-120">apple-120</option> 
<option value="apple-300">apple-300</option> 
</select> 

Answer 2

"hasClass()"에 배열을 전달할 수 없습니다. 음, 할 수는 있지만 작동하지 않습니다.

if ($.map(allVals, function(_, cv) { return $(options.classTarget).hasClass(cv) ? 'x' : ''); }).join('').length) { 
    $.each(allVals, function(_. cv) { $(options.classTarget).removeClass(cv); }); 
    $(options.classTarget).addClass(newClass); 
} 

[편집] 죄송합니다 그 해킹 원 : 그것은 "어떤"작업을 할 수 있도록 깨끗한 ​​아니지만, 여기 난 그냥 생각 해킹 그래서 jQuery를은 "감소"또는 "foldl"기능이 없습니다 잠깐의 't 작업 보류 ... [편집] 지금은 고정