我有一个有几个下拉菜单的表单。当用户选择下拉菜单时,有一个 onchange 事件应该更新图像。我在定位图像时遇到问题。我知道 img 标签之前的 select 元素 ID,但我不知道如何获取 img id。
因此,当其中一个下拉菜单发生更改时,img_c-cup#
(其中 # 是数字)应根据选择而更改。
这是更改的javascript:
<script>
jQuery.noConflict();
(function($){
$("select").change(function(){
var j = this.value;
var amanda = $(this).closest(':has(img)').find('img').attr('id');
console.log("AMANDA: "+amanda);
imgflavor = j;
var res1 = imgflavor.substring(0, imgflavor.indexOf("|"));
var res2 = res1.replace("%", "");
var res3 = res2.replace(" ", "_");
var res = res3.toLowerCase();
imgflavor = res;
img_ccup = amanda;
if ( imgflavor == "0")
{
$('#'+img_ccup).attr('src',"https://www.X.com/lids/no_lid.png");
}
else
{
$('#'+img_ccup).attr('src',"https://www.X.com/lids/" + imgflavor + "_150x150.png");
}
});
})(jQuery);
</script>
这是表单代码:
<form method='post' enctype='multipart/form-data' id='gform_3' action='/?gf_page=preview&id=3'>
<div class='gform_heading'>
<h3 class='gform_title'>concof test single</h3>
<span class='gform_description'></span>
</div>
<div class='gform_body'>
<ul id='gform_fields_3' class='gform_fields top_label form_sublabel_below description_below'>
<li id='field_3_1' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible' >
<h2 class='gsection_title'>C-Cup #1</h2>
</li>
<li id='field_3_2' class='gfield gfield_price gfield_price_3_2 gfield_product_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
<label class='gfield_label' for='input_3_2' >Flavor 1<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_2' id='input_3_2' class='medium gfield_select' tabindex='1' aria-required="true" aria-invalid="false">
<option value='0|0' >Select a Flavor</option>
<option value='100 columbian|0' >100% Columbian</option>
<option value='beanies blend|0' >Beanies Blend</option>
<option value='butterscotch|0' >Butterscotch</option>
<option value='caramel|0' >Caramel</option>
<option value='cinnamon|0' >Cinnamon</option>
<option value='decaf|0' >Decaf</option>
<option value='french vanilla|0' >French Vanilla</option>
<option value='green tea|0' >Green Tea</option>
<option value='hazelnut|0' >Hazelnut</option>
<option value='hot chocolate|0' >Hot Chocolate</option>
<option value='light roast|0' >Light Roast</option>
<option value='medium roast|0' >Medium Roast</option>
<option value='red velvet|0' >Red Velvet</option>
<option value='seasonal roast|0' >Seasonal Roast</option>
<option value='texas maple pecan|0' >Texas Maple Pecan</option>
</select>
</div>
</li>
<li id='field_3_3' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
<label class='gfield_label' for='input_3_3' >Grams 1<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_3' id='input_3_3' class='medium gfield_select' tabindex='2' aria-required="true" aria-invalid="false">
<option value='7 Grams|0.7' >7 Grams</option>
<option value='8 Grams|0.8' >8 Grams</option>
<option value='9 Grams|0.9' >9 Grams</option>
<option value='10 Grams|1' selected='selected'>10 Grams</option>
<option value='11 Grams|1.1' >11 Grams</option>
<option value='12 Grams|1.2' >12 Grams</option>
</select>
</div>
</li>
<li id='field_3_4' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible' >
<img id="img_c-cup1" src="https://www.XXXX.com/lids/no_lid.png">
</li>
<li id='field_3_6' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible' >
<h2 class='gsection_title'>C-Cup #2</h2>
</li>
<li id='field_3_5' class='gfield gfield_price gfield_price_3_5 gfield_product_3_5 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible' >
<label class='gfield_label' for='input_3_5' >Product Name<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_5' id='input_3_5' class='medium gfield_select' tabindex='3' aria-required="true" aria-invalid="false">
<option value='0|0' >Select a Flavor</option>
<option value='100 columbian|0' >100% Columbian</option>
<option value='beanies blend|0' >Beanies Blend</option>
<option value='butterscotch|0' >Butterscotch</option>
<option value='caramel|0' >Caramel</option>
<option value='cinnamon|0' >Cinnamon</option>
<option value='decaf|0' >Decaf</option>
<option value='french vanilla|0' >French Vanilla</option>
<option value='green tea|0' >Green Tea</option>
<option value='hazelnut|0' >Hazelnut</option>
<option value='hot chocolate|0' >Hot Chocolate</option>
<option value='light roast|0' >Light Roast</option>
<option value='medium roast|0' >Medium Roast</option>
<option value='red velvet|0' >Red Velvet</option>
<option value='seasonal roast|0' >Seasonal Roast</option>
<option value='texas maple pecan|0' >Texas Maple Pecan</option>
</select>
</div>
</li>
<li id='field_3_7' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 field_sublabel_below field_description_below gfield_visibility_' >
<label class='gfield_label' for='input_3_7' >Option</label>
<div class='ginput_container ginput_container_select'>
<select name='input_7' id='input_3_7' class='medium gfield_select' tabindex='4' aria-invalid="false">
<option value='First Option|0' >First Option</option>
<option value='Second Option|0' >Second Option</option>
<option value='Third Option|0' >Third Option</option>
</select>
</div>
</li>
<li id='field_3_8' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible' >
<img id="img_c-cup2" src="https://www.XXXX.com/lids/no_lid.png">
</li>
</ul>
</div>
<div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_3' class='gform_button button' value='Submit' tabindex='5' onclick='if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; jQuery("#gform_3").trigger("submit",[true]); }' />
<input type='hidden' class='gform_hidden' name='is_submit_3' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='3' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
<input type='hidden' class='gform_hidden' name='state_3' value='WyJ7XCIyXCI6W1wiNTc1MTM5NGQzMThjYzk0MDAyOWMzNDE2MjU4' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_3' id='gform_target_page_number_3' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_3' id='gform_source_page_number_3' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
稍微更改您的 jquery 代码以查看以下同级 li 元素以找到第一个带有 img 的元素。
jQuery.noConflict();
(function($) {
$("select").change(function() {
var j = this.value;
var amanda;
var li = $( this ).closest( 'li' );
while ( li.next('li') != null ) {
li = li.next('li');
console.log( li.attr('id') );
if ( li.find( 'img' ).length ) {
amanda = li.find( 'img' ).attr( 'id' );
break;
}
}
console.log("AMANDA: " + amanda);
imgflavor = j;
var res1 = imgflavor.substring(0, imgflavor.indexOf("|"));
var res2 = res1.replace("%", "");
var res3 = res2.replace(" ", "_");
var res = res3.toLowerCase();
imgflavor = res;
img_ccup = amanda;
if (imgflavor == "0") {
$('#' + img_ccup).attr('src', "https://www.X.com/lids/no_lid.png");
} else {
$('#' + img_ccup).attr('src', "https://www.X.com/lids/" + imgflavor + "_150x150.png");
}
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' enctype='multipart/form-data' id='gform_3' action='/?gf_page=preview&id=3'>
<div class='gform_heading'>
<h3 class='gform_title'>concof test single</h3>
<span class='gform_description'></span>
</div>
<div class='gform_body'>
<ul id='gform_fields_3' class='gform_fields top_label form_sublabel_below description_below'>
<li id='field_3_1' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'>
<h2 class='gsection_title'>C-Cup #1</h2>
</li>
<li id='field_3_2' class='gfield gfield_price gfield_price_3_2 gfield_product_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible'>
<label class='gfield_label' for='input_3_2'>Flavor 1<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_2' id='input_3_2' class='medium gfield_select' tabindex='1' aria-required="true" aria-invalid="false">
<option value='0|0' >Select a Flavor</option>
<option value='100 columbian|0' >100% Columbian</option>
<option value='beanies blend|0' >Beanies Blend</option>
<option value='butterscotch|0' >Butterscotch</option>
<option value='caramel|0' >Caramel</option>
<option value='cinnamon|0' >Cinnamon</option>
<option value='decaf|0' >Decaf</option>
<option value='french vanilla|0' >French Vanilla</option>
<option value='green tea|0' >Green Tea</option>
<option value='hazelnut|0' >Hazelnut</option>
<option value='hot chocolate|0' >Hot Chocolate</option>
<option value='light roast|0' >Light Roast</option>
<option value='medium roast|0' >Medium Roast</option>
<option value='red velvet|0' >Red Velvet</option>
<option value='seasonal roast|0' >Seasonal Roast</option>
<option value='texas maple pecan|0' >Texas Maple Pecan</option>
</select>
</div>
</li>
<li id='field_3_3' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible'>
<label class='gfield_label' for='input_3_3'>Grams 1<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_3' id='input_3_3' class='medium gfield_select' tabindex='2' aria-required="true" aria-invalid="false">
<option value='7 Grams|0.7' >7 Grams</option>
<option value='8 Grams|0.8' >8 Grams</option>
<option value='9 Grams|0.9' >9 Grams</option>
<option value='10 Grams|1' selected='selected'>10 Grams</option>
<option value='11 Grams|1.1' >11 Grams</option>
<option value='12 Grams|1.2' >12 Grams</option>
</select>
</div>
</li>
<li id='field_3_4' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'>
<img id="img_c-cup1" src="https://www.XXXX.com/lids/no_lid.png">
</li>
<li id='field_3_6' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'>
<h2 class='gsection_title'>C-Cup #2</h2>
</li>
<li id='field_3_5' class='gfield gfield_price gfield_price_3_5 gfield_product_3_5 gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible'>
<label class='gfield_label' for='input_3_5'>Product Name<span class='gfield_required'>*</span></label>
<div class='ginput_container ginput_container_select'>
<select name='input_5' id='input_3_5' class='medium gfield_select' tabindex='3' aria-required="true" aria-invalid="false">
<option value='0|0' >Select a Flavor</option>
<option value='100 columbian|0' >100% Columbian</option>
<option value='beanies blend|0' >Beanies Blend</option>
<option value='butterscotch|0' >Butterscotch</option>
<option value='caramel|0' >Caramel</option>
<option value='cinnamon|0' >Cinnamon</option>
<option value='decaf|0' >Decaf</option>
<option value='french vanilla|0' >French Vanilla</option>
<option value='green tea|0' >Green Tea</option>
<option value='hazelnut|0' >Hazelnut</option>
<option value='hot chocolate|0' >Hot Chocolate</option>
<option value='light roast|0' >Light Roast</option>
<option value='medium roast|0' >Medium Roast</option>
<option value='red velvet|0' >Red Velvet</option>
<option value='seasonal roast|0' >Seasonal Roast</option>
<option value='texas maple pecan|0' >Texas Maple Pecan</option>
</select>
</div>
</li>
<li id='field_3_7' class='gfield gfield_price gfield_price_3_2 gfield_option_3_2 field_sublabel_below field_description_below gfield_visibility_'>
<label class='gfield_label' for='input_3_7'>Option</label>
<div class='ginput_container ginput_container_select'>
<select name='input_7' id='input_3_7' class='medium gfield_select' tabindex='4' aria-invalid="false">
<option value='First Option|0' >First Option</option>
<option value='Second Option|0' >Second Option</option>
<option value='Third Option|0' >Third Option</option>
</select>
</div>
</li>
<li id='field_3_8' class='gfield gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible'>
<img id="img_c-cup2" src="https://www.XXXX.com/lids/no_lid.png">
</li>
</ul>
</div>
<div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_3' class='gform_button button' value='Submit' tabindex='5' onclick='if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; ' onkeypress='if( event.keyCode == 13 ){ if(window["gf_submitting_3"]){return false;} window["gf_submitting_3"]=true; jQuery("#gform_3").trigger("submit",[true]); }'
/>
<input type='hidden' class='gform_hidden' name='is_submit_3' value='1' />
<input type='hidden' class='gform_hidden' name='gform_submit' value='3' />
<input type='hidden' class='gform_hidden' name='gform_unique_id' value='' />
<input type='hidden' class='gform_hidden' name='state_3' value='WyJ7XCIyXCI6W1wiNTc1MTM5NGQzMThjYzk0MDAyOWMzNDE2MjU4' />
<input type='hidden' class='gform_hidden' name='gform_target_page_number_3' id='gform_target_page_number_3' value='0' />
<input type='hidden' class='gform_hidden' name='gform_source_page_number_3' id='gform_source_page_number_3' value='1' />
<input type='hidden' name='gform_field_values' value='' />
</div>
</form>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句