jQuery將<span>更改爲<label>並添加for =「」與以前<input> ID

我有一些jQuery將選定的跨度轉換爲標籤。jQuery將<span>更改爲<label>並添加for =「」與以前<input> ID

我現在的問題是，我需要添加for =「」，以便它可以用作按鈕（我使用單選按鈕，輸入隱藏，所以它只是一個盒子 - 因此標籤需要有輸入的ID爲了工作）。我知道我需要創建一個變量，但我不知道如何編寫它。

我需要什麼（並糾正我，如果我錯了）是一個變量，創建<label>標記+ for =「」與前一個輸入的ID在「」。

現在這些單選按鈕帶有一個模塊，雖然我使用的是CMS，所以我不能將id名稱本身定位爲每次不同，並由CMS生成。所以js需要定位'previous/parent'輸入標籤。

所以這正是我所需要的最終代碼看起來像爵士之後運行：

<div class="wrapper"> 
<input type="radio" id="radio1" name="radios" value="SML"> 
    <label for="radio1">Small</label> 
<input type="radio" id="radio2" name="radios" value="MED"> 
    <label for="radio2">Meduim</label > 
<input type="radio" id="radio3" name="radios" value="LRG"> 
    <label for="radio3">Large</label > 
</div>

請幫助！

</script> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    jQuery.each($(".wrapper span"), function() { 
 
    $(this).replaceWith("<label>" + $(this).text() + "</label>"); 
 
    }); 
 
    }); 
 
</script>

input[type=radio] { 
 
    display:none; 
 
    margin:10px; 
 
} 
 

 
input[type=radio] + label { 
 
    display:inline-block; 
 
    margin:0; 
 
    padding: 8px 15px; 
 
    background-color: #eeeeee; 
 
    border-color:none; 
 
\t text-transform:uppercase; 
 
\t color:#BDBDBD; 
 
\t cursor:pointer; 
 

 
} 
 

 
input[type=radio]:checked + label { 
 
    background-image: none; 
 
    background-color:#EBE300; 
 
\t color:#454545; 
 
}

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

 
<div class="wrapper"> 
 
\t <input type="radio" id="radio1" name="radios" value="SML"> 
 
     <span>Small</span> 
 
\t <input type="radio" id="radio2" name="radios" value="MED"> 
 
     <span>Meduim</span> 
 
\t <input type="radio" id="radio3" name="radios" value="LRG"> 
 
     <span>Large</span> 
 
</div>

來源

2016-09-13 DaveP19

我認爲你可以使用屬性（比如''''''''''來存儲'for'數據 – baiyangcao

只要改變JS來

$(document).ready(function() { 
    jQuery.each($(".wrapper span"), function() { 
    var input_id = $(this).prev().attr("id"); 
    $(this).replaceWith("<label for='"+input_id+"'>" + $(this).text() + "</label>"); 
    }); 
    });

這將讓之前的節點的ID，並將其添加到標籤「的」屬性

來源

2016-09-13 00:35:17

你應該這樣做以下

<script type="text/javascript"> 
$(document).ready(function() { 
var i = 1; 
jQuery.each($(".wrapper span"), function() { 
     var id = "radio"+i; 
     $(this).replaceWith("<label for='radio"+id+"'> " + $(this).text() + "</label>"); 
     i++; 
    }); 
}); 
</script>

記住迭代函數;）

來源

2016-09-13 00:35:33

jQuery將<span>更改爲<label>並添加for =「」與以前<input> ID

回答

相關問題