変数に依存する重複svgパスイベント

私はバスケットボールのSVGコートを作った。このsvgでは、私に有益な2つの重要な道があります：と#threepoint_area_bと#inside_area_bと#threepoint_area_bです。変数に依存する重複svgパスイベント

#inside_area_aは、#threepoint_area_bと重複し、#inside_area_bは、#threepoint_area_aと重なっている。 jQueryでは変数に応じて1つのペア（aまたはb）のみをクリック可能にしたいと考えています。たとえば、

if(poss=="home"){ 
    //#inside_area_a and #threepoint_area_a click functions 
} 
else //#inside_area_b and #threepoint_area_b click functions

これはどのようにjQueryで行うことができますか？

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve"> 
 
    <style type="text/css"> 
 
    svg { 
 
     height: 100%; 
 
    } 
 
    .st0 { 
 
     fill: none; 
 
     stroke: #010101; 
 
     stroke-width: 3; 
 
    } 
 
    #inside_area_a { 
 
     fill: transparent; 
 
    } 
 
    #inside_area_b { 
 
     fill: transparent; 
 
    } 
 
    #inside_area_a:hover { 
 
     fill: #1abc9c; 
 
    } 
 
    #inside_area_b:hover { 
 
     fill: #1abc9c; 
 
    } 
 
    </style>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve"> 
 
    <style type="text/css"> 
 
    svg { 
 
     height: 100%; 
 
    } 
 
    .st0 { 
 
     fill: none; 
 
     stroke: #010101; 
 
     stroke-width: 3; 
 
    } 
 
    </style> 
 
    <rect id="XMLID_28_" x="5.2" y="24.3" class="st0" width="0" height="186.7" /> 
 
    <path id="inside_area_a" class="st0" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" /> 
 
    <path id="threepoint_area_a" class="st0" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3 
 
\t \t \t \t \t \t \t \t \t v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" /> 
 
    <path id="inside_area_b" class="st0" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" /> 
 
    <path id="threepoint_area_b" class="st0" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4 
 
\t \t \t \t \t \t \t \t \t s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" /> 
 
    <line id="center_line" class="st0" x1="217.8" y1="231.9" x2="217.8" y2="3.4" /> 
 
    <ellipse id="center_circle" class="st0" cx="217.8" cy="117.6" rx="27.3" ry="26.9" /> 
 
    <line id="freethrow_line_a" class="st0" x1="93.3" y1="144.5" x2="93.3" y2="90.8" /> 
 
    <line id="freethrow_line_b" class="st0" x1="342.4" y1="144.5" x2="342.4" y2="90.8" /> 
 
    <path id="freethrow_circle_a" class="st0" d="M93.3,90.8c15.1,0,27.3,12,27.3,26.9s-12.2,26.9-27.3,26.9" /> 
 
    <path id="freethrow_circle_b" class="st0" d="M342.4,144.5c-15.1,0-27.3-12-27.3-26.9s12.2-26.9,27.3-26.9" /> 
 
    <line id="freethrow_lane_line_a_left" class="st0" x1="93.3" y1="144.5" x2="4.6" y2="144.9" /> 
 
    <line id="freethrow_lane_line_a_right_dashes" class="st0" x1="4.4" y1="90.8" x2="93.8" y2="90.8" /> 
 
    <line id="freethrow_lane_line_b_left_dashes" class="st0" x1="431.1" y1="144.5" x2="342" y2="144.5" /> 
 
    <line id="freethrow_lane_line_b_right_dashes" class="st0" x1="430.6" y1="90.8" x2="342.2" y2="90.8" /> 
 
    <line id="basket_board_a" class="st0" x1="23.4" y1="131.1" x2="23.4" y2="104.2" /> 
 
    <line id="basket_board_b" class="st0" x1="412.3" y1="131.1" x2="412.3" y2="104.2" /> 
 
    <line id="basket_holder_a" class="st0" x1="23.4" y1="117.6" x2="27.9" y2="117.6" /> 
 
    <line id="basket_holder_b" class="st0" x1="412.3" y1="117.6" x2="407.7" y2="117.6" /> 
 
    <ellipse id="XMLID_27_" class="st0" cx="31.7" cy="117.6" rx="3.8" ry="3.7" /> 
 
    <ellipse id="basket_b" class="st0" cx="403.9" cy="117.6" rx="3.8" ry="3.7" /> 
 
</svg>

出典

2016-08-27 Lukas Baliūnas

私はあなたの "内部" と "3ポイント" の領域を重複。あるセットのために、私は彼らのようにイドを去った。他のセットについては、私はidに "select_"を追加した。これら2つのセットを持つことで、ホバーターゲットをカラーターゲットから分離することができます。（おそらく、この複雑な複製を動的に、特により複雑なグラフィックスのために行うべきですが、この手作業の複製はテクニックを実証するのに十分です。）

元の要素をsvgの要素のスタックsvgコードの開始点）を指定して、色付けすることで黒線が隠れることはありません。（ただし、色を付けると、3つの点領域が内側の領域を覆わないように、これらを少し並べ替えなければならなかったことに注意してください。）しかし、重複セットはsvgスタックの最上部に配置しますsvgコード）を使用して、ホバーターゲットが最上位になるようにします。

次に、重複要素、つまりホバーイベントを発生させる要素をすべて隠して、最初にホバーを検出できないようにしました。 1つのチームのボタンがクリックされると、そのチームの1つのホバーブル "内側"領域と1つのホバーブル "3点"領域のみが「可視」になります。これらはまだビューアには見えず（塗りつぶしは常に透明ですが）、現在はホバーターゲット（隠されているものから可視なものへの可視性の変更）に関しては「可視」です。したがって、選択されたチームに応じて、ホバーターゲットは基本的にスワップされます。すべてのターゲットのホバーアビリティは、常に元のままであることに注意してください。 4のうちの2つだけが目に見えるので、いずれの時点でも真にホバリングが可能です。

二重ネストされたforEachループを含むコードは、すべてのjQueryホバーイベントを設定する簡潔な方法です。

更新日：あなたはどの領域をクリックするか尋ねました。適切なターゲットが "select_"で始まるIDを持つものであることを示すためにコードを更新しました。ホームチームまたは離れたチームの2ポイントまたは3ポイントのエリアをクリックして更新した簡単なゲームスコアを実装することで、デモを楽しむことができました。

var $btn = $('button'); 
 
var ins = 'inside_area_'; 
 
var thr = 'threepoint_area_'; 
 
var selIns = 'select_' + ins; 
 
var selThr = 'select_' + thr; 
 
var score = {home: 0, away: 0}; 
 

 
[[ins, selIns], [thr, selThr]].forEach(function(areas) { 
 
    ['a', 'b'].forEach(function(side) { 
 
    $('#' + areas[1] + side).hover(
 
     function() {$('#' + areas[0] + side).css('fill', '#1abc9c' );}, 
 
     function() {$('#' + areas[0] + side).css('fill', 'transparent');} 
 
    ); 
 
    $('#' + areas[1] + side).click(basketballShotHandler); 
 
    }); 
 
}); 
 

 
function basketballShotHandler(evt) { 
 
    areaClicked = evt.target.id; 
 
    var team, pts; 
 
    switch (areaClicked) { 
 
    case 'select_inside_area_a':  team = 'home'; pts = 2; break; 
 
    case 'select_threepoint_area_a': team = 'home'; pts = 3; break; 
 
    case 'select_inside_area_b':  team = 'away'; pts = 2; break; 
 
    case 'select_threepoint_area_b': team = 'away'; pts = 3; break; 
 
    } 
 
    score[team] += pts; 
 
    $('#homeScore').text(score.home); 
 
    $('#awayScore').text(score.away); 
 
} 
 

 
$btn.click(function(e) { 
 
    var currentSide, opposingSide; 
 
    switch (e.target.innerText) { 
 
    case 'Home': 
 
     currentSide = 'a'; 
 
     opposingSide = 'b'; 
 
     break; 
 
    case 'Away': 
 
     currentSide = 'b'; 
 
     opposingSide = 'a'; 
 
     break; 
 
    } 
 
    $('#' + selIns + currentSide).css('visibility', 'visible'); 
 
    $('#' + selThr + currentSide).css('visibility', 'visible'); 
 
    $('#' + selIns + opposingSide).css('visibility', 'hidden'); 
 
    $('#' + selThr + opposingSide).css('visibility', 'hidden'); 
 
});

svg { 
 
    height: 100%; 
 
} 
 
.st0 { 
 
    fill: none; 
 
    stroke: #010101; 
 
    stroke-width: 3; 
 
} 
 
.st1 { 
 
    fill: transparent; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="home">Home</button> 
 
<button id="away">Away</button> 
 
<span>Home: <span id="homeScore">0</span> Away: <span id="awayScore">0</span></span> 
 
<div> 
 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 435.7 234.4" style="enable-background:new 0 0 435.7 234.4;" xml:space="preserve"> 
 
    <rect id="XMLID_28_" x="5.2" y="24.3" class="st0" width="0" height="186.7" /> 
 
    <path id="threepoint_area_a" class="st0" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3 v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" /> 
 
    <path id="threepoint_area_b" class="st0" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4 s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" /> 
 
    <path id="inside_area_a" class="st0" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" /> 
 
    <path id="inside_area_b" class="st0" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" /> 
 
    <line id="center_line" class="st0" x1="217.8" y1="231.9" x2="217.8" y2="3.4" /> 
 
    <ellipse id="center_circle" class="st0" cx="217.8" cy="117.6" rx="27.3" ry="26.9" /> 
 
    <line id="freethrow_line_a" class="st0" x1="93.3" y1="144.5" x2="93.3" y2="90.8" /> 
 
    <line id="freethrow_line_b" class="st0" x1="342.4" y1="144.5" x2="342.4" y2="90.8" /> 
 
    <path id="freethrow_circle_a" class="st0" d="M93.3,90.8c15.1,0,27.3,12,27.3,26.9s-12.2,26.9-27.3,26.9" /> 
 
    <path id="freethrow_circle_b" class="st0" d="M342.4,144.5c-15.1,0-27.3-12-27.3-26.9s12.2-26.9,27.3-26.9" /> 
 
    <line id="freethrow_lane_line_a_left" class="st0" x1="93.3" y1="144.5" x2="4.6" y2="144.9" /> 
 
    <line id="freethrow_lane_line_a_right_dashes" class="st0" x1="4.4" y1="90.8" x2="93.8" y2="90.8" /> 
 
    <line id="freethrow_lane_line_b_left_dashes" class="st0" x1="431.1" y1="144.5" x2="342" y2="144.5" /> 
 
    <line id="freethrow_lane_line_b_right_dashes" class="st0" x1="430.6" y1="90.8" x2="342.2" y2="90.8" /> 
 
    <line id="basket_board_a" class="st0" x1="23.4" y1="131.1" x2="23.4" y2="104.2" /> 
 
    <line id="basket_board_b" class="st0" x1="412.3" y1="131.1" x2="412.3" y2="104.2" /> 
 
    <line id="basket_holder_a" class="st0" x1="23.4" y1="117.6" x2="27.9" y2="117.6" /> 
 
    <line id="basket_holder_b" class="st0" x1="412.3" y1="117.6" x2="407.7" y2="117.6" /> 
 
    <ellipse id="XMLID_27_" class="st0" cx="31.7" cy="117.6" rx="3.8" ry="3.7" /> 
 
    <ellipse id="basket_b" class="st0" cx="403.9" cy="117.6" rx="3.8" ry="3.7" /> 
 
    <path id="select_inside_area_a" class="st1" d="M29.1,211c52.4,0,94.9-41.8,94.9-93.4S81.5,24.3,29.1,24.3H5.2V211H29.1z" /> 
 
    <path id="select_threepoint_area_a" class="st1" d="M5.3,24L5.3,24l0-0.7L5.3,24h23.9c52.4,0,94.9,41.8,94.9,93.4s-42.5,93.4-94.9,93.4H5.3 
 
\t \t \t \t \t \t \t \t \t v0.6l0-0.6v18.7h425.4V5.3H5.3V24z" /> 
 
    <path id="select_inside_area_b" class="st1" d="M430.5,23.6v188.1V211h-23.9c-52.4,0-94.9-41.8-94.9-93.4s42.5-93.4,94.9-93.4h23.9" /> 
 
    <path id="select_threepoint_area_b" class="st1" d="M430.4,210.4L430.4,210.4l0,0.7L430.4,210.4h-23.9c-52.4,0-94.9-41.8-94.9-93.4 
 
\t \t \t \t \t \t \t \t \t s42.5-93.4,94.9-93.4h23.9V23l0,0.6V5H5v224.1h425.4V210.4L430.4,210.4z" /> 
 
</svg> 
 
    </div>

出典

2016-08-28 04:23:14

私はパスが、私はそれを置くべきで「クリック」イベントを、追加したいと思いますか？条件がアクティブである。 –

私の答えの更新を参照してください。（私はあなたの質問を適切に理解することを願っています） –

ありがとう、それは私が尋ねた以上です:) –

変数に依存する重複svgパスイベント

答えて

関連する問題