javascript - 隐藏();不会隐藏 map 图像

Question

我在使用 hide(); 方法隐藏 map 图像时遇到问题，它适用于 Chrome、FF、Safari 和 Edge(IE11 除外)等浏览器。

我读到其他类似的问题说 IE11 不喜欢 hide/show()。我尝试了这种方法 $(".mapActive").css({'display':'none'});，它在除 IE11 之外的所有浏览器上都可以正常工作。

它不适用于 IE11 -

这适用于 Chrome、FF、Safari 和 Edge

JS

$(document).ready(function() {
"use strict";
$(".mapActive").hide();
$("ul.j_linkLocation li#mapTX").addClass("active").show(); 
$(".mapActive#mapTX").show();
$("ul.j_linkLocation li").click(function() {
$("ul.j_linkLocation li").removeClass("active");
$(this).addClass("active");
$(".mapActive").hide();
var activeTab = $(this).find("a").attr("href");
  $(activeTab).fadeIn('fast');
  return false;
  });

});

HTML

<div class="row m_activeMap">
            <div class="col-lg col-map-width">
                <div class="j_img-overlay"><img src="imgs/img-overlay.png" alt="Seek the World! | SVRS" id="imghide"></div>
                <div class="j_map-interfaces">
                    <div id="mapTX" class="mapActive"><img src="imgs/map-TX.png" alt="Seek the World - Texas" class="m_map"></div>
                    <div id="mapLA" class="mapActive"><img src="imgs/map-LA.png" alt="Seek the World - Louisiana" class="m_map"></div>
                    <div id="mapMI" class="mapActive"><img src="imgs/map-MI.png" alt="Seek the World - Mississippi" class="m_map"></div>
                    <div id="mapAL" class="mapActive"><img src="imgs/map-AL.png" alt="Seek the World - Alabama" class="m_map"></div>
                    <div id="mapGA" class="mapActive"><img src="imgs/map-GA.png" alt="Seek the World - Georgia" class="m_map"></div>
                    <div id="mapFL" class="mapActive"><img src="imgs/map-FL.png" alt="Seek the World - Florida" class="m_map"></div>
                    <!--<div id="mapSC" class="mapActive"><img src="imgs/map-SC.png" alt="Seek the World - South Carolina" class="m_map"></div>
                    <div id="mapNC" class="mapActive"><img src="imgs/map-NC.png" alt="Seek the World - North Carolina" class="m_map"></div>
                    <div id="mapVA" class="mapActive"><img src="imgs/map-VA.png" alt="Seek the World - Virginia" class="m_map"></div>-->
                    <div id="mapMD" class="mapActive"><img src="imgs/map-MD.png" alt="Seek the World - Maryland" class="m_map"></div>
                    <!--<div id="mapWV" class="mapActive"><img src="imgs/map-WV.png" alt="Seek the World - West Virginia" class="m_map"></div>-->
                </div>
            </div>
            <div class="col-lg-3">
                <div class="j_linkHeader"><img src="imgs/link-header.png" alt="Seek the location below!"></div>
                <div class="j_linkHeader2"><p>Seek the location below!</p></div>
                <div id="j_mapLinks" class="j_linksCol">
                    <ul class="j_linkLocation">
                        <li class="j_linkHover is-active">
                            <a href="#mapTX" class="j_linkThumb"> Austin, TX</a>
                            <p class="j_accordion-panel">Texas School for the Deaf<br>1234 Congress Ave, <br>Austin, TX 78753<br>
                            <span class="j_dateLocation">Feb 7, 2018</span></p>
                        </li>

                        <li class="j_linkHover">
                            <a href="#mapLA" class="j_linkThumb"> Baton Rouge, LA</a>
                            <p class="j_accordion-panel">Rouge School for the Deaf<br>1234 Easy Ave, <br>Baton Rouge, LA 68753<br>
                            <span class="j_dateLocation">Feb 18, 2018</span></p>
                        </li>

                        <li class="j_linkHover">
                            <a href="#mapMI" class="j_linkThumb"> Jackson, MI</a>
                            <p class="j_accordion-panel">School for the Deaf<br>1234 NoWay Ave, <br>Jackson, MI 58753<br>
                            <span class="j_dateLocation">Feb 18, 2018</span></p>
                        </li>   

                        <li class="j_linkHover">
                            <a href="#mapAL" class="j_linkThumb"> Talladega, AL</a>
                            <p class="j_accordion-panel">Mobile for the Deaf<br>1234 Whoo Ave, <br>Talladega, AL 48753<br>
                            <span class="j_dateLocation">Feb 25, 2018</span></p>
                        </li>

                        <li class="column-break"></li>

                        <li class="j_linkHover">
                            <a href="#mapFL" class="j_linkThumb"> St Augustine, FL</a>
                            <p class="j_accordion-panel"> Florida School for the Deaf<br>1234 Ouch Ave, <br> St Augustine, FL 48753<br>
                            <span class="j_dateLocation">Mar 12, 2018</span></p>
                        </li>   

                        <li class="j_linkHover">
                            <a href="#mapGA" class="j_linkThumb"> Atlanta, GA</a>
                            <p class="j_accordion-panel">Atlanta for the Deaf<br>1234 You Ave, <br>Atlanta, GA 38753<br>
                            <span class="j_dateLocation">Mar 12, 2018</span></p>
                        </li>   

                        <li class="j_linkHover">
                            <a href="#mapMD" class="j_linkThumb"> Frederick, MD</a>
                            <p class="j_accordion-panel">Frederick for the Deaf<br>1234 You Ave, <br>Frederick, MD 38753<br>
                            <span class="j_dateLocation">Mar 12, 2018</span></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

这是我在将元素交付给客户之前遇到的唯一问题。

Answer 1

您不能在 IE 浏览器中使用 "use strict";。

jQuery(function( $ ) {
  // "use strict"; // IE hates this, we hate IE

  var $locLI = $("ul.j_linkLocation").find("li"); // Cache! Think about performance
  var $mapActive = $(".mapActive");

  $mapActive.hide();

  $("#mapTX").addClass("active").show(); // No need to prefix with classes. ID is unique.

  $locLI.click(function( e ) {
    e.preventDefault(); // Use this instead of return false;

    $locLI.not( this ).removeClass("active"); // not this
    $(this).addClass("active");               // Now, this :)
    $mapActive.hide();                        // Hide again?.. hmm
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn('fast');

  });

});