javascript 轉 jquery

jquery

豬豬人 2019-08-06 15:28:34 ‧ 2293 瀏覽

分享至

<body>
    <button id="test" value="1">click</button>
</body>
<script>
    function Button(){
        this.click = false;
        this.click = function(){
            this.clicked = true;
            if(this.clicked){
                alert(this.value);
            }
        }
    }
    var button = new Button();
    var elem = document.getElementById('test');
    elem.addEventListener('click',button.click);
</script>

我希望可以用jquery的方式改寫
主要是不懂jquery如何綁定函式的背景空間

看更多先前的討論...收起先前的討論...

fillano iT邦超人 1 級 ‧ 2019-08-06 16:09:44 檢舉

this.click = false;應該是this.clicked = false;吧？

Homura iT邦高手 1 級 ‧ 2019-08-06 16:21:52 檢舉

話說為啥要特地用JS去觸發Click.....
addEventListener 的click監聽不是已經觸發了嗎?
直接在button function裡面寫`alert(this.value);`就好了啊?

fillano iT邦超人 1 級 ‧ 2019-08-06 16:29:32 檢舉

另外，你的this有問題，你得先把觀念弄正確一點。

fillano iT邦超人 1 級 ‧ 2019-08-06 16:34:44 檢舉

你透過addEventListener把button.click掛到elem的click事件時，button.click函數的this會變成elem而不是你原本寫的Button產生的物件。當然你這樣寫是會alert啦，但是邏輯就很奇怪。this.click=false;然後就this.click=function...那為何要寫this.click=false呢？然後this.clicked=true接下來就if(this.clicked)...那永遠是true，根本不需要if了阿XD

豬豬人 iT邦新手 4 級 ‧ 2019-08-06 16:45:26 檢舉

應該是this.clicked = false;才對
我知道button.click的this會變成elem，如果不把Button()放到button裡面，Button的背景會是window，之後執行alert(this.value);會是undefind

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

freessaint

iT邦新手 5 級 ‧ 2019-08-06 15:47:14

有點沒懂你是要取按鈕的值用jquery的寫法?

codeopen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script>

$( "button" ).click(function() {
  alert( "寫法1按鈕的值:"+ $(this).val());
});

$( "button" ).on( "click", function() {
  alert( "寫法2按鈕的值:"+ $(this).val());
});

</script>


<body>
    <button id="test" value="1">click</button>
    <button id="test2" value="2">click2</button>
</body>

回應 2
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 2019-08-06 16:04:09 檢舉

alert 我希望可以用回呼的方式寫

listennn08 iT邦高手 5 級 ‧ 2019-08-06 16:52:12 檢舉

$('#test').click(function(){
    Button($(this).attr('id'));
  })
function Button(id){
  alert($('#'+id).val());
}

這樣嗎

登入發表回應

fillano

iT邦超人 1 級 ‧ 2019-08-06 16:22:26

https://jsfiddle.net/fillano/4nfy3obh/

我猜測你是要做一個按鈕，按過一次以後，下一次再按就會alert，所以稍微調整一下。

回應 3
分享
檢舉

豬豬人 iT邦新手 4 級 ‧ 2019-08-06 17:05:14 檢舉

function select(id){
                var ID = $('#'+id);
                ID.on('change',select);
                function select(){
                    $url = "php/"+ID.attr('id')+".php";
                    $.ajax({
                        url : $url,
                        type : 'post',
                        data : {
                            city_code : ID.val()
                        },
                        datatype:'html'
                    }).done(function(data){
                        if(data){
                            $('#house_city').html(data);
                        }
                    })
                }
            }
            select('house_state');

想請問這樣寫為甚麼不行呢?

listennn08 iT邦高手 5 級 ‧ 2019-08-06 17:30:12 檢舉

你是要做select的change事件吧
還是要button去抓select的值?

fillano iT邦超人 1 級 ‧ 2019-08-07 09:17:50 檢舉

你先在程式裡面加上console.log當作標示，例如：

function select(id){
	console.log('[outer select] enter');
	var ID = $('#'+id);
	ID.on('change',select);
	function select(){
		console.log('[inner select] enter');
		$url = "php/"+ID.attr('id')+".php";
		$.ajax({
			url : $url,
			type : 'post',
			data : {
				city_code : ID.val()
			},
			datatype:'html'
		}).done(function(data){
			console.log('[inner select] step 1 done');
			if(data){
				console.log('[inner select] step 2 if');
				$('#house_city').html(data);
			}
		})
	}
}
select('house_state');

然後在開發工具的Console檢查看看程式跑的流程是否跟你預期的一樣。

登入發表回應

淺水員

iT邦大師 6 級 ‧ 2019-08-06 17:28:06

如果需要紀錄是否已經點擊，可以利用 closure 的方式處理。

html

<button id="test1" value="JS">測試 JS</button>
<button id="test2" value="JQ">測試 JQ</button>

JavaScript

//產生函式的函式，
function createCallbck()
{
    var clicked=false;
    return function(evt) {
        if(clicked) {
            alert(this.value);
            //JQ也可寫成 alert($(this).val());
        }
        clicked=true;
    }
}

//原生 JS
var elem = document.getElementById('test1');
elem.addEventListener('click', createCallbck());

//JQ 寫法
$('#test2').click(createCallbck());