js动态替换img图片地址以及attr()的常用功能

 

$(".imgclass").attr('src',imgSrc)

 

先上效果

需要引入jquery依赖

<script type="text/javascript" src="/js/jquery-1.8.2.min.js"></script>

 

html

<div class="r-input-t"><li><img src="/images/djimart/footer/Singapore.png" alt=""/> <span>Singapore</span><i
        class="iptd"></i></div>
<div class="r-put-val" style="display: none;">
    <ul>
        <li><img src="/images/djimart/footer/Singapore.png" alt="" /> <span style="margin-left:3px;">Singapore</span></li>
        <li><img src="/images/djimart/footer/UAE.png" alt=""/><span>UAE</span></li>
        <li><img src="/images/djimart/footer/Vietnam.png" alt=""/><span>Vietnam</span></li>
        <li><img src="/images/djimart/footer/Thailand.png" alt=""/><span>Thailand</span></li>
        <li><img src="/images/djimart/footer/Philippines.png"
                 alt=""/><span>the Philippines</span></li>
        <li><img src="/images/djimart/footer/USA.png" alt=""/><span>USA</span></li>
    </ul>
</div>

 js

 $(".r-input-t").click(function () {

            $(this).next('.r-put-val').show();

            $(this).find("i").removeClass("iptd");
            $(this).find("i").addClass("iptu");


//            alert(tjmJson);
        });



        $(".r-put-val ul li").click(function () {

           var selectValue= $(this).find("span").text().trim();

            var imgSrc = $(this).find("img").attr("src");

            $(".r-input-t").find("li img").attr('src',imgSrc);

            $(".r-input-t").find("span").text(selectValue);

            $(".r-put-val").hide();
        });