滿足兩個條件值後插入內容

我真的不知道如何解決這個問題。我一直在閱讀像javascript，html，css等10小時，如果語句，條件等等（初學者試圖學習所有東西> _ <）。這很有趣，但我很困擾如何解決這個問題。滿足兩個條件值後插入內容

這是我正在努力完成的。我希望用戶能夠點擊2張圖片中的1張，然後將圖片的值從0更改爲1或選擇？然後我想再做一次這個確切的場景（基本上是兩種不同的輸入選擇）。最後，我想通過div在頁面上插入其他內容，如果兩個值都從0更改爲1.

對於我的問題，我也非常抱歉沒有受過教育。儘管我盡力學習，但我絕對喜歡試驗和錯誤。

編輯：這是我在這個網站上的第一篇文章。你們是令人難以置信的。給我一些時間閱讀所有評論。我必須查看你們所提到的很多東西來充分理解它。

不管再次感謝。

2012-01-09 user1137804

我不知道我很明白你正在試圖完成什麼...但你應該能夠用Javascript使用onclick事件來完成它。您可以調用一個名爲「selectImage」的函數，並在那裏更改變量的值（以瞭解哪個圖像被點擊），並且還可以更改單擊圖像的CSS以添加可視邊框。我建議你使用jQuery來完成它，與使用純Javascript相比，它的工作量更少，工作更可靠。 – Pier 2012-01-09 01:12:42

HTML

<img src="" id="Picture1"> 
<img src="" id="Picture2">

腳本

//Apply a click event to both pictures and have it callback to the checkClick function 
$("#Picture1, #Picture2").click(checkClick); 

function checkClick(e) 
{ 
    //$(this) will refer to the currently clicked picture, 
    //jQuery's .data function allows storing data within the object 
    $(this).data("clicked",1); 

    //Grab the data values from both pictures 
    var p1 = $("#Picture1").data("clicked"); 
    var p2 = $("#Picture2").data("clicked"); 

    //Check if both equal 1 (will once each has been clicked) 
    if(p1 == 1 && p2 == 1) 
     ShowContent(); 
} 

function ShowContent() 
{ 
    //do your code to show content 
}

來源

2012-01-09 01:21:53

我真的很享受你在這裏做了什麼，它對我正在嘗試做的事情非常有效。 Patrick的幫助非常感謝。我會玩弄一下，看看我是否可以偶然發現任何其他問題 – user1137804 2012-01-09 01:45:07

是否有可能通過其他操作清除點擊數據？比如說用戶點擊了一張圖片。然後在完成上面的序列之前點擊第3張圖片。這個附加事件是否可以清除以前的數據？ – user1137804 2012-01-09 01:48:45

$（「＃Picture1，＃Picture2」）。數據（「點擊」，0）;要清除數據，只需設置第三張圖片的點擊事件來執行該行，它將清除兩者。 – 2012-01-09 01:54:32

你想要什麼的要點是：

var pic1 = false 
    , pic2 = false; 

$('.pic1').bind('click', function(){ 
    pic1 = true; 
    check(); 
}); 

$('.pic2').bind('click', function(){ 
    pic2 = true; 
    check(); 
}); 

function check(){ 
    if(pic1 && pic2){ // do something here } 
}

來源

2012-01-09 01:16:45

怎麼是這樣的：

var selected[0] = false; 
var selected[1] = false; 
function imageClicked(tag) { 
    selected[tag] = !selected[tag]; 
    self.selectedTagValueChanged(); 
}; 

function selectedTagValueChanged() { 
    if (selected[0] && selected[1] { 
     //Inserrt your DOM manipulation stuff here 
    } 
}

此代碼將昌每次變量的值的imageClicked函數被調用與單擊之前的值相反（如切換）。

來源

2012-01-09 01:19:20 dbrajkovic

將任意數據添加到任意HTML元素的一種方法是使用數據屬性。解決您的問題的一種方法是將用戶點擊它時設置爲data-clicked，然後檢查組合條件。示例（使用jQuery）：

<img class="clickable-image" src="..." data-clicked="0"/> 
<img class="clickable-image" src="..." data-clicked="0"/> 
<script type="text/javascript> 
    $(".clickable-image").click(function() { 
     $(this).data("clicked") = 1; 
     var allOnes = true; 
     $(".clickable-image").each(function() { 
      allOnes = allOnes && $(this).data("clicked") == 1; 
     }); 
     if (allOnes) { 
      // Your custom code 
     } 
    }); 
</script>

來源

2012-01-09 01:19:38 mgibsonbr

jQuery的數據函數並沒有設置data- *屬性，所以你不必在html標記 – 2012-01-09 01:30:19

@PatrickEvans中包含這些屬性，但它會讀取它，所以會有一個初始值（即使在這個特殊情況下，它不是真的需要）。 http://api.jquery.com/data/#data-html5 – mgibsonbr 2012-01-09 01:39:52

滿足兩個條件值後插入內容

回答

相關問題