Question

我有一个有几个下拉菜单的表单。当用户选择下拉列表时，会有一个应该更新图像的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>

Answer 1

你可以用分裂和正则表达式来搞定，直到你做对了，但我不会这样做。也许是这样的事情：

<select id="coffee_select"></select>

...

function CoffeeType(id, name, image_src) {
    this.id = id;
    this.name = name;
    this.image_src = image_src;
}

function CoffeeModel() {
    this.coffees = [];
    this.coffees.push(new CoffeeType(1, "Columbian", "columbian.jpg"));
    this.coffees.push(new CoffeeType(2, "Beanies", "beanies.jpg"));
}

CoffeeModel.prototype.getCoffeeById() {
    for(var i = 0; i < this.coffees.length; i++) {
        var coffee = this.coffees[i];

        if(coffee.id == id) {
            return coffee;
        }
    }

    return null;
}

var coffeeModel = new CoffeeModel();

var select = $("#coffee_select");

for(var i = 0; i < coffeeModel.coffees.length; i++) {
    var coffee = coffeeModel.coffees[i];

    var option = $("<option>");
    option.val(coffee.id);
    option.text(coffee.name);

    select.append(option);
}

select.off("change");
select.on("change", function() {
    var coffee = getCoffeeById($(this).val());

    if(coffee) {
        $("#coffee_image").src("attr", coffee.image_src);
    }
});

Answer 2

稍微更改你的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>

Answer 3

使用$(this).closest('li').nextAll().find('img').first().attr('id');获取您的ID。（first()可能不是绝对必要的）

找到最接近的li祖先，然后找到在img之后出现的所有li元素的集合，并从结果集中的第一个元素中获取id。

有更好的方法可以做到这一点。将一个类应用于img元素并添加一个与您的选择匹配的值的数据属性可能是一种方法....所以你可以做更像$('.img_ccup[data-from="input_#"])') ... {{{ {1}}

＆＃13;

<img class="img_ccup" data-from="input_#" ...>

＆＃13;

jQuery.noConflict();
(function($){


$("select").change(function(){
    var j = this.value;
    var amanda  = $(this).closest('li').nextAll().find('img').first().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);

＆＃13;

使用已知元素id javascript / jquery

3 个答案: