Вземете стойност/атрибут на щракнатия бутон като event.data с .on(click)

Трябва да получа стойността или друг атрибут на щракнат бутон, за да го използвам като event.data във функция.

Ето настройката:

  • има 26 бутона със стойност/текст от "A" до "Z" като контрола за списък по азбука.
  • всеки бутон има един и същи class="byalpha"
  • всеки бутон стартира същата ajax-search-функция, която получава json-данни от sql, за да направи списък
  • чрез щракване върху бутон на class="byname" уникалната стойност (напр. "B") трябва да бъде доставена като event.data.letter на функцията

Мога да го накарам да работи с други контроли на функцията, използвайки радио входове и други неща:

$( "input[name=selectdept]" ).on ("click", {  searchdept: function (){ return $( "input[name=selectdept]:checked" ).val()}}, startsearch );

Както виждате, щракването върху входа задейства function(startsearch) и получава стойността на входа като event.data.searchdept, която да се използва във функцията. Всичко работи добре.

Но опитите с бутоните ме подлудяват. Опитах всичко, което можех само да си представя. Тъй като трябва да получа бутона по клас, а не по уникално име или идентификатор, не мога да използвам начин като с радио входа. Опитах се да получа всеки attr с помощта на $(this). Но просто идва с "недефиниран". Някои от моите подходи:

$(".byname").on ("click", {letter: $(this).attr('value')}, searchdept );

or

$(".byname").on ("click", {letter: function(){ return $(this).attr("value")}}, searchdept );

или всякакъв вид

.val()  // .attr() // .text() // .html()  .... you name it

Някъде тук намерих този "event.target.value", който ще достави правилната стойност (напр. "B" за бутон B), но не е добро решение в контекста на моята функция, тъй като има общо 3 различни начина (26 бутона / 4 радио входа / въвеждане на текст) за стартиране на функцията и доставените стойности биха я направили сложна.


javascript events button jquery attr
person Lox    schedule 19.03.2015    source източник
comment
Можете ли да публикувате своя HTML код? дори и да можеш да го свириш, тогава би било страхотно.   -  person Mox Shah    schedule 19.03.2015
comment
ще можете ли да промените манипулатора на щракане... можете ли да споделите манипулатора на щракване   -  person Arun P Johny    schedule 19.03.2015
comment
между другото this, до който осъществявате достъп, не е целевият обект на събитието, а функцията letter, която също е обект и няма методите, до които се опитвате да получите достъп, между другото защо се опитвате да предадете стойността на събитие обект, не можете ли просто да извикате метода в рамките на обратното извикване onclick.   -  person Mushtaq Jameel    schedule 19.03.2015
comment
<input type="button" /> или <button></button> елемента? Може ли да се включи html в оригиналната публикация?   -  person guest271314    schedule 19.03.2015

Отговори (1)


arrow_upward
1
arrow_downward

Здравейте, не можах да разбера какво се опитвате да направите тук, но предположих, че искате да получите стойността на променливата данни, която сте задали за всеки бутон.

Пресъздадох вашия сценарий РЕДАКТИРАНЕ - Актуализирах кода на Javascript и сега изглежда, че работи според вашите изисквания

HTML

$('.byalpha').on('click', {
    'letter': function(element) {
      return $(element).data('letter');
    }
  },

  function(e) {
    $('#picked_letter').html(e.data.letter(this));
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="byalpha" type='button' value='A' data-letter="a" />
<input class="byalpha" type='button' value='B' data-letter="b" />
<input class="byalpha" type='button' value='C' data-letter="c" />
<input class="byalpha" type='button' value='D' data-letter="d" />
<input class="byalpha" type='button' value='E' data-letter="e" />

<hr/>
<div>
  <span>Letter : </span>  <span id="picked_letter"></span>
</div>
<hr/>

Javascript

$('.byalpha').on('click', 
    {'letter': function (element) {
            return $(element).data('letter');
        }
    }, 
    function (e) {
        $('#picked_letter').html(e.data.letter(this));
    }
);

ето линк към работната проба

http://jsfiddle.net/70fje1mh/2/

person Mushtaq Jameel    schedule 19.03.2015
comment
Това е!!! Ти си човекът! Така че основно бях доста близо до частта за получаване на данните от елемента. $( ".byname" ).on ("click", {letter: function (element) {return $(element).data('letter')}}, searchdept); втората част от вашия пример (функция (e)) не е необходима в моята настройка. НО решаващият фактор всъщност беше (това) при извикването на данните за събитието --› event.data.letter(this) за функцията searchdept THX*1001! - person Lox; 19.03.2015
comment
Да, тъй като преминахте метода, който ще бъде изпълнен, просто исках да уловя обратното извикване, ето защо? - person Mushtaq Jameel; 19.03.2015