clickイベントハンドラを使用したJQuery。すべての要素を表示しないようにするにはどうすれば1つの要素が1つしか表示されないようにするのですか？

Question

clickイベントハンドラを使用したjqueryで。すべての要素を表示しないようにするにはどうすればいいですか？1つの要素をクリックするだけで、関連する要素が表示されます。

私の例のページ：イメージマップを使用してhttp://chrism.net46.net/final-ff-IX/summoners-paintings.html

。私は10の "ホットスポット"、それぞれの怪物絵画と10 divの各絵画についての情報を持っています。ホットスポットをクリックすると、そのページセグメントに関する情報を含むライトボックスが開きます。

私はjqueryツールのようなjqueryプラグインを成功させましたが、プラグインを使用しないでどのように習得したいのですか？

とにかくここに私が0:15から始めることを意味するビデオの例があります。http://www.youtube.com/watch?v=7628mBPumM4これはもっと明確です。

ここでhttp://jsfiddle.net/muThj/1/イメージマップなし。上記のリンクサイトがトラフィックのためにダウンした場合に備えて、コードレビューをホストするためにそれを使用してください。

<img src="wall-writings.jpg" alt="Eidolon mural paintings of Curbuncle, Madeen, Ramuh, Shiva, Ark, Ifrit, Leviathan, Phoenix, Fenrir, Atomos" usemap="#eidolonpaintings"> 
     <map name="eidolonpaintings"> 
     <area shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" > 
     <area shape="poly" coords="628,253,617,222,624,172,630,149,647,109,667,81,681,66,694,53,720,49,756,48,768,53,775,75,825,99,924,135,981,154,1019,169,912,266,795,312,747,372,670,335,628,253" > 
     <area shape="poly" coords="1018,196,1029,182,1040,174,1043,167,1043,153,1045,138,1059,132,1076,137,1079,159,1082,176,1090,189,1110,249,1127,269,1132,286,1127,303,1146,380,1150,400,1136,409,1095,417,1067,418,1046,415,1029,405,1009,409,988,405,974,399,967,391,977,348,994,275,988,264,1018,196" > 
     <area shape="poly" coords="1173,125,1176,116,1168,110,1163,101,1168,83,1167,75,1153,73,1148,61,1159,52,1165,46,1172,41,1192,33,1202,33,1213,33,1220,37,1233,38,1248,40,1259,54,1254,65,1227,71,1227,80,1218,93,1228,105,1231,116,1230,137,1228,152,1225,175,1217,184,1209,195,1195,219,1196,235,1197,245,1190,250,1180,248,1140,204,1130,191,1173,135,1173,125" > 
     <area shape="poly" coords="1269,1,1302,41,1320,59,1322,73,1316,86,1310,105,1310,114,1317,125,1324,133,1325,149,1322,179,1317,196,1311,207,1303,217,1292,207,1288,221,1284,238,1279,254,1281,270,1281,290,1290,294,1306,314,1316,334,1312,349,1311,363,1313,383,1295,407,1285,418,1284,429,1272,438,1274,458,1285,459,1336,463,1369,461,1457,465,1488,463,1513,467,1482,429,1493,406,1474,366,1475,330,1474,287,1469,276,1479,254,1478,235,1472,216,1469,183,1469,166,1475,149,1477,129,1473,123,1475,118,1482,85,1504,53,1536,3,1536,-1,1269,1" > 
     <area shape="poly" coords="1482,301,1516,347,1510,371,1526,396,1550,409,1568,418,1583,442,1614,470,1622,481,1633,479,1673,487,1709,480,1716,448,1724,369,1728,331,1739,296,1713,265,1699,250,1681,228,1652,233,1619,235,1584,237,1528,273,1482,301" > 
     <area shape="poly" coords="1719,222,1747,160,1751,143,1726,149,1724,132,1717,119,1712,97,1687,86,1636,33,1643,28,1687,47,1772,41,1823,2,1843,1,1858,35,1914,50,1976,37,2082,87,2080,100,1911,119,1879,141,1829,136,1836,158,1852,180,1859,200,1849,225,1825,238,1811,266,1819,284,1837,301,1843,304,1847,325,1823,309,1805,285,1797,263,1816,228,1829,220,1818,214,1790,201,1773,192,1762,180,1735,214,1719,222" > 
     <area shape="poly" coords="2051,147,2074,125,2080,118,2094,113,2107,106,2131,112,2169,84,2231,92,2254,107,2273,130,2274,147,2264,161,2265,179,2269,214,2235,215,2174,208,2189,172,2160,165,2140,161,2115,180,2102,198,2091,204,2071,208,2061,205,2053,197,2083,180,2094,172,2087,161,2065,168,2052,168,2051,147" > 
     <area shape="poly" coords="1847,298,1896,265,1988,240,2041,232,2044,253,2096,251,2082,273,2105,287,2091,329,2065,349,2079,377,2049,390,2032,397,2018,420,2070,456,2050,477,1986,437,1960,421,1957,460,1939,460,1908,408,1904,438,1871,448,1876,402,1857,410,1811,435,1803,430,1844,392,1864,359,1875,335,1865,324,1847,298" > 
     <area shape="poly" coords="2332,1,2523,1,2535,23,2548,38,2541,50,2534,69,2524,79,2528,101,2524,159,2511,208,2503,272,2482,295,2479,344,2452,393,2434,394,2419,427,2387,422,2368,407,2351,351,2341,300,2337,213,2330,201,2312,201,2308,170,2307,153,2326,143,2341,115,2348,90,2342,81,2338,64,2332,1" > 
     </map> 

    $('area').attr('href', '#'); 
    $('.off-the-side').addClass('push-side'); 

    $('.wall-writings').addClass('wall-writepos').prepend('<button class="close"><img src="x-icon.png" alt=""></button>').hide(); 

    $('area').click(function(){$('#writing1').fadeIn('slow');return false;}); 

    $('.close').click(function(){$(".wall-writings").fadeOut();}); 

Answer 1

希望私は問題を理解:)

を私は次のように各領域にHREFタグを配置します：私は、これは動作するはずだと思う

<map> 
    <area href="#div1" shape="poly" coords="287,230,301,244,319,251,329,252,340,252,347,252,338,246,336,237,344,233,344,229,345,225,356,227,362,229,376,230,385,235,393,242,396,250,403,254,408,248,414,239,419,231,424,224,429,222,433,233,432,248,428,263,422,272,422,279,410,286,396,288,388,291,385,293,390,296,393,305,396,316,400,318,407,320,414,325,416,332,420,343,415,352,414,360,408,369,401,374,405,387,409,399,407,409,408,412,402,414,368,365,357,374,358,390,359,403,354,409,343,415,337,416,323,370,294,362,268,327,264,274,287,230" > 
    </map> 
<div id="some_div">Some text</div> 
$('area').click(function(){var href = $(this).attr('href'); $(href).show(); return false;}); 

CSS

#some_div{display:none;} 

。これが意図したものでない場合は、さらに説明してください。

Answer 2

clickイベントハンドラを使用したjqueryの場合。 の要素をすべて表示しないようにするにはどうすればいいですか？ただ1つの要素が1つではなく、 にクリックすると表示されます。

あなたのHTMLマッピングから推測できるものから、タグのID属性が不足していて、実際にはJqueryがイメージマップ全体をターゲットにしています。

有罪コード：あなたは地域のマップのいずれかをクリックしたとき、そのための

$('area').click(function(){$('#writing1').fadeIn('slow');return false;}); 

は、すべての要素が表示されるでしょう。