Как назначить события onClick нескольким изображениям в jQuery/JSP/Java?

Question

Я пытаюсь использовать jQuery с JSP для отображения таблицы, где в каждой строке есть три возможных действия: Up, Down, Refresh. Я хочу отображать изображение для каждого даже рядом друг с другом и иметь возможность щелкнуть кнопки в каждой строке, чтобы выполнить запрошенную операцию (вверх/вниз/обновить), как определено в моем Java-коде. Таким образом, для каждой кнопки и каждой строки будет выполняться другое действие/функция. Например: Row 1 action будет: modelUp, modelDown, modelRefresh; действия в строке 2 будут: productionUp, productionDown, productionRefresh; ... и т. д.

Проблема в том, что я не знаю jQuery и мало что имею в JSP. Я был Google, но он не получил меня очень далеко.

Может кто-нибудь помочь мне? Благодарю.

Answer 1

Хорошо, я в значительной степени решил большую часть этого пути.

Вот мой JSP (это только одна строка таблицы, а остальные следуют по той же схеме): 'Код

<form id="checkStatusForm" action="<%= model.getUri() %>" method="post" > 
<input type="hidden" name="<%=FrameworkConstants.FRAMEWORK_COMMAND%>" value="checkstatus" /> 
<input type="hidden" name="<%=FrameworkConstants.FRAMEWORK_GUID%>" value="<%=model.getPageId()%>" /> 
<input type="hidden" name="regionID" id="regionID" value="" /> 
<input type="hidden" name="regionAction" id="regionAction" value="" /> 

<img src="<%=request.getContextPath() %>/images/up.jpg" alt="" name="modelUp" width="20" height="20" id="modelUp" onclick="CheckStatus.performRegionAction('model', 'up')" /> 
<img src="<%=request.getContextPath() %>/images/down.jpg" alt="" name="modelDown" width="20" height="20" id="modelDown" onclick="CheckStatus.performRegionAction('model', 'down')" /> 
<img src="<%=request.getContextPath() %>/images/refresh.png" alt="" name="modelRefresh" width="20" height="20" id="modelRefresh" onclick="CheckStatus.performRegionAction('model', 'refresh')" /> 

<button type="submit" style="margin-left: 2px; margin-top: 5px; margin-bottom: 0px;" >Commit Changes</button> 
</form> 

'

Вот мой JQuery/JavaScript: «код

performRegionAction : function(regionID, regionAction){ 
     document.getElementById('regionID').value = regionID; 
     document.getElementById('regionAction').value = regionAction; 
    },' 

И, наконец, вот мой Java: '

public void setRegionID(Field<String> regionID){ 
     this.regionID = regionID; 
    } 

    public Field<String> getRegionID(){ 
     return this.regionID; 
    } 

    public void setRegionAction(Field<String> regionAction){ 
     this.regionAction = regionAction; 
    } 

    public Field<String> getRegionAction(){ 
     return this.regionAction; 
    } 

'

Answer 2

В основном вы подключаете действие на селектор CSS в JQuery с помощью

$('.classname').bind('click', function() { 
    // do something 
}); 

Это будет выполнять код всякий раз, когда щелкнул то, что есть класс .classname.

В вашей ситуации у вас будет 3 класса, по одному для каждого типа кнопок. Как указать пользовательское поведение - это ваш выбор. Вы можете прикрепить некоторый пользовательский атрибут к каждому элементу DOM каждой строки, чтобы внутри функции щелчка вы могли различать их и выполнять различные действия соответственно.

Помните, что это хороший дизайн, только если вы можете использовать этот атрибут, не загромождая свою функцию щелчка длинной цепочкой if/else, иначе вам нужно будет иметь много разных действий, связанных с каждой кнопкой. Поскольку вы работаете с JSP, вы можете генерировать JS-код динамически, когда полученный HTML-код создается для клиента.