iT邦幫忙

0

javascript 轉 jquery

  • 分享至 

  • xImage
<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 }} |
{{ formatDate(item.duration) }}
直播中
0
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>
豬豬人 iT邦新手 4 級 ‧ 2019-08-06 16:04:09 檢舉

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

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

這樣嗎

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

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

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

豬豬人 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');

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

你是要做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檢查看看程式跑的流程是否跟你預期的一樣。

0
淺水員
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());

我要發表回答

立即登入回答