Question

我有以下jsfiddle，它根据用户选择的选项显示和隐藏各种图像组。这工作正常但我需要能够将其中一个图像的src放入输入框。代码和小提琴。

当选择框改变时，如何将一个可见图像src放入我的image_text输入字段？我希望使用child()方法，但这不起作用：

jQuery("#image_text").val( jQuery("div[class*='"+choice_opt+"']").child().props("src") );

CODE：

http://jsfiddle.net/WMyc7/2/

jquery的：

function setImages() {
    jQuery(".image_holder").css("display", "none");
    var abt = jQuery("#select_About option:selected").text();
    jQuery("div[class*='" + abt + "']").css("display", "block");
}

jQuery('select').on('change', function () {
    setImages();
});

setImages();

HTML：

<div>
<div class="image_holder Animals">
    <img src="http://lorempixel.com/output/animals-q-c-100-100-2.jpg" />
</div>
<div class="image_holder Animals">
    <img src="http://lorempixel.com/output/animals-q-c-100-100-8.jpg" />
</div>
<div class="image_holder Places To Go">
    <img src="http://lorempixel.com/output/city-q-c-100-100-9.jpg" />
</div>
<div class="image_holder Places To Go">
    <img src="http://lorempixel.com/output/nature-q-c-100-100-5.jpg" />
</div>
<div class="image_holder Misc Items">
    <img src="http://lorempixel.com/output/nightlife-q-c-100-100-1.jpg" />
</div>
<div class="image_holder Misc Items">
    <img src="http://lorempixel.com/output/sports-q-c-100-100-5.jpg" />
</div>
</div>

<h1>Select</h1>
<select id="select_About">
    <option value="0">Animals</option>
    <option value="1">Places To Go</option>
    <option value="2">Misc Items</option>
</select>

<h1>SRC</h1>
<input type="text" name="image" id="image_text">

Answer 1

请看一下这个JSFiddle：http://jsfiddle.net/WMyc7/7/

很抱歉，但我无法帮助重构您的功能，因为IMO是一种更高效，更易于维护的方法。我还将您的SELECT选项更改为使代码更容易的值。顺便说一下，最好只使用小写字母和ID。

更改后的HTML：

<select id="select_About">
  <option value="animals">Animals</option>
  <option value="places_to_go">Places To Go</option>
  <option value="misc_items">Misc Items</option>
</select>

和JS：

jQuery(function(){

    // DOM READY

    // Cache everything that is needed frequently
    var $imageHolders = jQuery(".image_holder"),
        $srcInput = jQuery('#image_text');

    function setImages() {
        var abt = jQuery("#select_About").val(),
            // Filter image holders by class selected
            $visibleImages = $imageHolders.filter('.'+ abt),
            src;

        // Hide all images
        $imageHolders.hide();
        // Show all images filtered by class in select dropdown
        $visibleImages.show();
        // Get src attribute of first image (attr always gets first of an array of elements)
        src = $visibleImages.find('img').attr('src');
        // set input field to src value
        $srcInput.val( src )
    }

    jQuery('select').on('change', function () {
        setImages();
    });

    setImages();

});

Answer 2

你可以做出类似的事情：

function setImages() {
    jQuery(".image_holder").css("display", "none");
    var abt = jQuery("#select_About option:selected").text();
    jQuery("div[class*='" + abt + "']").css("display", "block");
    $("[name=image]").attr("value",(jQuery("div[class*='" + abt +"']").find("img").attr("src")));
}

jQuery - 按类获取div child的src

2 个答案: