使用已知元素 id javascript/jquery 查找下一个 img 元素

用户4708809

我有一个有几个下拉菜单的表单。当用户选择下拉菜单时,有一个 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&#038;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>
杰森B

稍微更改您的 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&#038;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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章