87,993
社区成员
发帖
与我相关
我的任务
分享我的js写的像一坨屎，我的页面乱的没法看！
以前作为一个j2ee开发人员，对前端没什么了解，对js的理解完全也就仅限于可以把页面搞搞好看。就在今年自己出来创业才知道前端js的水到底有多深，简单来说做一个后台系统，90%的时间花在了页面这一块。完全为了功能去做，写完自己都不忍直视
。简单来说就是一坨屎！
谁能给我解惑－ －
页面进来的时候，页面上有很多元素需要事件，我就全部在页面上写onclick方法，页面上全是，怎么去优雅的绑定一个页面所有的事件？如果不写在页面上，我怎么传值过去啊。
我的.js文件里面就是一个又一个的 function(xxx){}......
看到这些自己写的代码世界真的不好了
。简单来说就是一坨屎！谁能给我解惑－ －
页面进来的时候，页面上有很多元素需要事件，我就全部在页面上写onclick方法，页面上全是，怎么去优雅的绑定一个页面所有的事件？如果不写在页面上，我怎么传值过去啊。
我的.js文件里面就是一个又一个的 function(xxx){}......
看到这些自己写的代码世界真的不好了
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="position">
<a href="#">首页</a> > 优惠管理 > 优惠查询
</div>
<ul class="check" style="float: left;margin-left: 56px;margin-bottom: 10px">
<li><b style="width: 80px">优惠类型:</b>
<select id="couponType">
<option value="-1" selected>请选择优惠类型</option>
<c:forEach items="${couponTypes }" var="type">
<c:choose>
<c:when test="${type.key eq coupon.couponType}">
<option value="${type.key }" selected>${type.value }</option>
</c:when>
<c:otherwise>
<option value="${type.key }">${type.value }</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</li>
<li><b>名称:</b><input type="text" id="couponName" value="${coupon.couponName }"/></li>
<li><button onclick="doQryCoupon(this)">查询</button></li>
</ul>
<div class="check_list">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>名称 </td>
<td>类别 </td>
<td>面值</td>
<td>开始时间</td>
<td>结束时间</td>
<td>使用范围</td>
<td>使用规则</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<c:forEach items="${page.itemObj }" var="data" varStatus="status">
<tr id="item${status.index }">
<td>${data.couponName }</td>
<td>
<c:choose>
<c:when test="${data.couponType eq 'Favor'}">优惠券</c:when>
<c:when test="${data.couponType eq 'OneYuan'}">劲爆单品</c:when>
</c:choose>
</td>
<td>${data.couponPrice}</td>
<td>${data.couponBegin}</td>
<td>${data.couponEnd}</td>
<td>${data.couponScope}</td>
<td>${data.couponRule}</td>
<td><a href="javascript:toEditCoupon('${data.couponID}')">编辑</a> | <a href="javascript:doDeleteCoupon('${data.couponID}','item${status.index }')">删除</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<c:if test="${page.pageCount gt 1}">
<div id="splitPage" data-name="优惠券信息" data-curPage="${page.curPage}" data-pageCount="${page.pageCount }" style="float: right;margin-right: 56px;">
<a href="javascript:goPage(-1)">上一页</a>
<a href="javascript:goPage(1)">下一页</a>
</div>
</c:if>
function doModifyPwd() {
var oldPwd = $("#oldPwd").val();
var newPwd = $("#newPwd").val();
var verifyPwd = $("#verifyPwd").val();
if (oldPwd.length <= 0) {
alert("请输入旧密码");
return;
}
if (newPwd.length <= 0) {
alert("请输入新密码");
return;
}
if (verifyPwd.length <= 0) {
alert("请输入确认密码");
return;
}
if (newPwd != verifyPwd) {
alert("两次密码输入不一致");
return;
}
$.ajax({
url : appUrl + "doModifyPwd.do",
type : "POST",
data : {"oldPwd":oldPwd,"newPwd":newPwd,"verifyPwd":verifyPwd},
dataType : "html",
async : false,
success : function(data) {
// window.location.href=appUrl+'login.do';
$.ajax({
url : appUrl + "index.do",
type : "POST",
data :{},
dataType : "html",
async : true,
success : function(data) {
},
error : function(xhr) {
after(that);
errorHandler(xhr.responseText);
}
});
},
error : function(xhr) {
errorHandler(xhr.responseText);
}
});
}
...全文
请发表友善的回复…
发表回复
slwsss 2014-11-09
- 打赏
- 举报
指定ID，动态绑定事件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="position">
<a href="#">首页</a> > 优惠管理 > 优惠查询
</div>
<ul class="check" style="float: left;margin-left: 56px;margin-bottom: 10px">
<li><b style="width: 80px">优惠类型:</b>
<select id="couponType">
<option value="-1" selected>请选择优惠类型</option>
<c:forEach items="${couponTypes }" var="type">
<c:choose>
<c:when test="${type.key eq coupon.couponType}">
<option value="${type.key }" selected>${type.value }</option>
</c:when>
<c:otherwise>
<option value="${type.key }">${type.value }</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
</li>
<li><b>名称:</b><input type="text" id="couponName" value="${coupon.couponName }"/></li>
<li><button onclick="doQryCoupon(this)">查询</button></li>
</ul>
<div class="check_list">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td>名称 </td>
<td>类别 </td>
<td>面值</td>
<td>开始时间</td>
<td>结束时间</td>
<td>使用范围</td>
<td>使用规则</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<c:forEach items="${page.itemObj }" var="data" varStatus="status">
<tr id="item${status.index }">
<td>${data.couponName }</td>
<td>
<c:choose>
<c:when test="${data.couponType eq 'Favor'}">优惠券</c:when>
<c:when test="${data.couponType eq 'OneYuan'}">劲爆单品</c:when>
</c:choose>
</td>
<td>${data.couponPrice}</td>
<td>${data.couponBegin}</td>
<td>${data.couponEnd}</td>
<td>${data.couponScope}</td>
<td>${data.couponRule}</td>
<td><a href="javascript:toEditCoupon('${data.couponID}')">编辑</a> | <a class="del" data-couponid="${data.couponID}" data-index="item${status.index }" href="#">删除</a></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<c:if test="${page.pageCount gt 1}">
<div id="splitPage" data-name="优惠券信息" data-curPage="${page.curPage}" data-pageCount="${page.pageCount }" style="float: right;margin-right: 56px;">
<a href="javascript:goPage(-1)">上一页</a>
<a href="javascript:goPage(1)">下一页</a>
</div>
</c:if>
<script>
$('a.del').click(function(){
var t=$(this);
doModifyPwd(t.attr('data-couponid'),t.attr('data-index'));
return false;
})
</script>
KK3K2005 2014-11-09
- 打赏
- 举报
java在写 jswing的时候
控件怎么和事件绑定的呢？
可以参考下
