jQuery來顯示來自id屬性的div

我有兩個輸入jQuery來顯示來自id屬性的div

<div class="form-group"> 
    <label>Store Username <span>*</span></label> 
    <input required type="text" name="storeusername" class="form-control info" id="1" /> 
</div> 
<div class="form-group"> 
    <label>Store Name<span>*</span></label> 
    <input required type="text" name="storename" class="form-control info" id="2" /> 
</div>

我在做什麼，是我當我點擊輸入首先應該隱藏所有div，然後挑選出輸入的ID並顯示其相應的格...

div的是這些

<div id="div1" class="infoDiv hidden"> 
    <div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span></h2></div> 
    <p>Store username is unique and it will be used to find your store.</p> 
    <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p> 
    <p>Please keep in mind before choosing username.</p> 
    <p> 
    <ul> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li> 
     <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li> 
    </ul> 
    </p> 
</div> 
<div id="div2" class="infoDiv hidden"> 
    <div class="company-story-content"><h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div> 
    <p>Div</p> 
</div>

jQuery的

$(document).ready(function() { 
    $(".info").click(function() { 
    var id = $(".info").attr('id'); 
    $(".infoDiv").hide(); 
    $("#div"+id).removeClass("hidden"); 
    }); 
});

但是這不起作用！沒有顯示div。任何人都可以幫我解釋一下嗎？

來源

2016-12-01 Alexis

嘗試：var id = $（this）.attr（'id'）;獲取當前/點擊的元素ID .... – sinisake

不，它不起作用！ – Alexis

我看到你的意圖是調出一個div當用戶打算在文本框中輸入數值。

由於用戶也可以用鍵盤導航到文本框，因此我建議您使用焦點事件來觸發調出div的邏輯而不是click。

$(".info").on('focus',function() 
{ 
    $(".infoDiv").hide(); 
    var id = $(this).attr('id'); 
    $("#div"+id).show(); 
});

來源

2016-12-01 17:52:20

這真的是一個有用的東西，你已經指出。 – Alexis

@Alexis很高興幫助.. :) –

我不確定你的'隱藏'類是什麼樣的，所以我用內聯樣式來隱藏div，然後jquery顯示/隱藏類似於你已經在做的事情。看小提琴。

https://jsfiddle.net/jkkr7efh/

HTML：

<div class="form-group"> 
    <label>Store Username <span>*</span></label> 
    <input required type="text" name="storeusername" class="form-control info" id="1" /> 
</div> 
<div class="form-group"> 
    <label>Store Name<span>*</span></label> 
    <input required type="text" name="storename" class="form-control info" id="2" /> 
</div> 

<div id="div1" class="infoDiv" style="display:none;"> 
    <div class="company-story-content"><h2 class="story-title">Store <span class="color-text">Username</span> </h2></div> 
    <p>Store username is unique and it will be used to find your store.</p> 
    <p>For example www.flashcart.com/<span class="color-text">abc</span> to find store that has <span class="color-text">abc</span> username.</p> 
    <p>Please keep in mind before choosing username.</p> 
    <ul> 
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Alphabets</span><li> 
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Numbers</span>.</li> 
    <li>&nbsp;&nbsp;&nbsp;&nbsp;Username can contain <span class="color-text">Underscores</span>.</li> 
    </ul> 
</div> 

<div id="div2" class="infoDiv" style="display:none;"> 
    <div class="company-story-content"> 
    <h2 class="story-title">Some other<span class="color-text">Username</span> </h2></div> 
    <p>Div</p> 
</div>

使用Javascript：

$(document).ready(function() 
     { 
     $(".info").click(function(event) 
     { 
      $(".infoDiv").hide(); 
      var id = $(event.target).attr('id'); 
      $("#div"+id).show(); 
     }); 
     });

來源

2016-12-01 17:42:55 mrogers

除了傳入'event'外，你也可以使用'this'。解決方案的關鍵是你使用'.show（）'而不是刪除一個類。 jQuery函數不添加類，但更改內聯樣式。 – krillgar

Krillgar它達到了相同的結果！這可以工作。以前我爲所有div製作單獨的函數。現在想要創建更智能的代碼。這工作，這是否 – Alexis

.hide（）和.show（）是由具有或去除「隱藏」類不同的機制。嘗試將最後一行更改爲： $（「＃div」+ id）.removeClass（「hidden」）。show（）;

來源

2016-12-01 17:44:14 Eric

這就是爲什麼最後一行不工作。然而，關於需要使用'this'來查找'id'的評論是正確的。 – krillgar

使用jQuery .hide（）函數與添加隱藏類來隱藏div不同，因此刪除隱藏的類不會顯示它們。您可以通過添加和刪除類來隱藏和顯示，也可以使用jQuery .hide（）和.show（）函數進行顯示。不要混用他的方法，否則會給你帶來麻煩。

來源

2016-12-01 17:46:15 Ryan

jQuery來顯示來自id屬性的div

回答

相關問題