堆棧內存溢出
  簡體   English   中英

當我將內聯代碼帶入外部子例程時，關聯區域的圖像映射突出顯示停止工作

[英]image map highlighting of associated areas stops working when I take inline code into an external subroutine

 原文  2020-09-26 18:35:41  1   1    javascript/ arrays/ imagemap/ dhtml

問題描述

我有 4 個動態生成 PNG 彩色圖像映射的模塊。 所有 4 項都按設計工作，包括突出顯示顏色圖區域集（例如州縣），其價值/比率度量數據被組織成四分位數。

有一個由所有 4 個共享的內聯代碼塊。該塊生成一個包含 4 個元素的數組（將其命名為“rels”）。 每個元素可能包含一串由逗號分隔的區域名稱。 元素的區域名稱對應於其值/比率度量數據落在范圍四分位數結構的四分位數中的區域。

當我將共享的內聯代碼塊放入一個外部子例程中時，上面提到的突出顯示在 4 個模塊中的 3 個中停止工作。 使用我正在構建的 1 個瀏覽器的“檢查元素”，我已經驗證了內聯代碼和子例程在所有四個模塊中產生相同的結果，並且使用了該 rels 數組的 4 個元素的標簽(rel='rels[0]') 在相應的 rels 元素中具有正確的內容。

我使用 mapper.js 來突出顯示單個區域和區域集。 它總是工作得很好。 當我將代碼塊放在子程序中時，單個區域突出顯示繼續在所有 4 個模塊中工作，但區域集的突出顯示在 4 個模塊中的 3 個模塊中停止，如上所述。 我把放在子程序中的塊放回內聯，突出顯示再次起作用。 我將代碼塊放回到外部子程序中，4 組區域的突出顯示再次停止工作。

它就像標簽，使用了 rels 數組，當它從子程序返回時就再也看不到它了，即使它在那里。 我實際上返回一個指針並使用它來獲取數組，並且按預期工作。 子程序在所有4個模塊中都正確返回了顏色圖區域的4個元素的數組，並且4個元素中的每個元素的區域與代碼塊內聯時相同。

我想更好地理解這一點。 我不知道如何繼續。 我已經為這個應用程序編寫了相當多的外部子程序，這些子程序可以毫無問題地返回圖像映射代碼中使用的數組和哈希值。 我現在有點被這個問題困住了。 任何建議表示贊賞。 謝謝你的時間。

克雷格

以下是來自模塊 1 的內聯塊、子例程調用、子例程和使用 rels 數組的圖像映射過程。 語言是 Perl。

內聯塊：

@rels = ();
  $rels[0] = '';$rels[1] = '';$rels[2] = '';$rels[3] = '';
  $lowqtile = '';   
  foreach $key (@counties) {

    $keyhld = $key;
    $key = lc($key);
    $dval = $cdvals{$key};

    if (defined $cdvals{$key}) { # Has a value.

      if ($direct eq 'i') {        

        if ($dval <= $q1) {
          $rels[0] .= $key . ','; # List of areas in this quartile.
          $lowqtile .= $keyhld . ':';
          $ccolors{$key}=$colors2[3];
        } elsif ($dval > $q1 && $dval <= $q2) {
            $rels[1] .= $key . ',';
            $ccolors{$key}=$colors2[2];
          } elsif ($dval > $q2 && $dval <= $q3) {
              $rels[2] .= $key . ',';
              $ccolors{$key}=$colors2[1];
            } else {
                $rels[3] .= $key . ',';
                $ccolors{$key}=$colors2[0]; # > $q3 - best.
              }               

      } elsif ($direct eq 'd') {          

          if ($dval >= $q1) {
            $rels[0] .= $key . ',';
            $lowqtile .= $keyhld . ':';
            $ccolors{$key}=$colors2[3];
          } elsif ($dval >= $q2 && $dval < $q1) {
              $rels[1] .= $key . ',';
              $ccolors{$key}=$colors2[2];
            } elsif ($dval >= $q3 && $dval < $q2) {
                $rels[2] .= $key . ',';
                $ccolors{$key}=$colors2[1];
              } else {
                  $rels[3] .= $key . ',';
                  $ccolors{$key}=$colors2[0]; # < $q3 - best.
                }          

        } else {            
           
            if ($dval >= $q3 || $dval < -$q3) {
              $rels[0] .= $key . ',';
              $lowqtile .= $keyhld . ':';
              $ccolors{$key}=$colors2[3];
            } elsif (($dval>=$q2 && $dval<$q3)||($dval<=-$q2 && $dval>-$q3)) {
                $rels[1] .= $key . ',';
                $ccolors{$key}=$colors2[2];
              } elsif (($dval>=$q1 && $dval<$q2)||($dval<=-$q1 && $dval>-$q2)) {
                  $rels[2] .= $key . ',';
                  $ccolors{$key}=$colors2[1];
                } else {
                    $rels[3] .= $key . ',';
                    $ccolors{$key}=$colors2[0]; # < $q1 || > -$q1 - best.
                  }             

          } # Goal. 

    } else {
        $ccolors{$key} = 'white'; # NA.
      }

  } # foreach.

  $i = 0;
  foreach $key (@rels) {    
    if (index($key,',') > -1) {
      $rels[$i] = substr($rels[$i],0,length($rels[$i])-1);
    }     
    $i++;
  }

  $lowqtile = substr($lowqtile,0,length($lowqtile)-1); # Strip last colon.

子程序調用：

# Set the base level rels array (used in quartile area coloring), the low quartile string of keys in that quartile used to color colormap data, and color code by key.

($lowqtile, $relsPtr, $cclrPtr) = gtclrStf($direct, $q1, $q2, $q3, $q4, \@counties, \%cdvals, \@colors2); # Preferred behavior, quartile bounds, and county, data, quartile colors in.
@rels = @$relsPtr; # Get array/hash from references.
%ccolors = %$cclrPtr; # Color codes by area.

子程序：

sub gtclrStf {

  my ($lowqtilex, $keyx, $keyhldx, $directx, $areasPtr, $avalsPtr, $qclrsPtr); # Scalars.

  my ($dvalx, $q1x, $q2x, $q3x, $q4x, $ix); # Numerics.

  my (@relsx, %aClrs, @areas, %avals, @qClrs); # Arrays/hashes.

  ($directx, $q1x, $q2x, $q3x, $q4x, $areasPtr, $avalsPtr, $qclrsPtr) = @_;
  @areas = @$areasPtr; # Get arrays from references.
  %avals = %$avalsPtr; 
  @qClrs = @$qclrsPtr;
  

  @relsx = ();
  $relsx[0] = '';$relsx[1] = '';$relsx[2] = '';$relsx[3] = '';
  $lowqtilex = '';   
  foreach $keyx (@areas) {

    $keyhldx = $keyx;
    $keyx = lc($keyx);
    $dvalx = $avals{$keyx};

    if (defined $avals{$keyx}) { # Has a value.

      if ($directx eq 'i') {        

        if ($dvalx <= $q1x) {
          $relsx[0] .= $keyx . ','; # List of areas in this quartile - used in area grouping.  
          $lowqtilex .= $keyhldx . ':'; # Used in colormap data highlighting.
          $aClrs{$keyx}=$qClrs[3];
        } elsif ($dvalx > $q1x && $dvalx <= $q2x) {
            $relsx[1] .= $keyx . ',';
            $aClrs{$keyx}=$qClrs[2];
          } elsif ($dvalx > $q2x && $dvalx <= $q3x) {
              $relsx[2] .= $keyx . ',';
              $aClrs{$keyx}=$qClrs[1];
            } else {
                $relsx[3] .= $keyx . ',';
                $aClrs{$keyx}=$qClrs[0]; # > $q3x - best.
              }               

      } elsif ($directx eq 'd') {          

          if ($dvalx >= $q1x) {
            $relsx[0] .= $keyx . ',';
            $lowqtilex .= $keyhldx . ':';
            $aClrs{$keyx}=$qClrs[3];
          } elsif ($dvalx >= $q2x && $dvalx < $q1x) {
              $relsx[1] .= $keyx . ',';
              $aClrs{$keyx}=$qClrs[2];
            } elsif ($dvalx >= $q3x && $dvalx < $q2x) {
                $relsx[2] .= $keyx . ',';
                $aClrs{$keyx}=$qClrs[1];
              } else {
                  $relsx[3] .= $keyx . ',';
                  $aClrs{$keyx}=$qClrs[0]; # < $q3x - best.
                }          

        } else {            
           
            if ($dvalx >= $q3x || $dvalx < -$q3x) {
              $relsx[0] .= $keyx . ',';
              $lowqtilex .= $keyhldx . ':';
              $aClrs{$keyx}=$qClrs[3];
            } elsif (($dvalx >= $q2x && $dvalx < $q3x) || ($dvalx <= -$q2x && $dvalx > -$q3x)) {
                $relsx[1] .= $keyx . ',';
                $aClrs{$keyx}=$qClrs[2];
              } elsif (($dvalx >= $q1x && $dvalx < $q2x) || ($dvalx <= -$q1x && $dvalx > -$q2x)) {
                  $relsx[2] .= $keyx . ',';
                  $aClrs{$keyx}=$qClrs[1];
                } else {
                    $relsx[3] .= $keyx . ',';
                    $aClrs{$keyx}=$qClrs[0]; # < $q1 || > -$q1 - best.
                  }             

          } # Goal. 

    } else {
        $aClrs{$keyx} = 'white'; # NA.
      }

  } # foreach.

  $ix = 0;
  foreach $keyx (@relsx) { # Eliminate trailing comma if there.    
    if (index($keyx,',') > -1) {
      $relsx[$ix] = substr($relsx[$ix],0,length($relsx[$ix])-1);
    }   
    $ix++;
  }  

  $lowqtilex = substr($lowqtilex,0,length($lowqtilex)-1); # Strip last colon.

  return $lowqtilex, \@relsx, \%aClrs; # Return array of keys in each quartile pointer, low quartile keys string, and colors array by area pointer.

}

使用 rels 數組的圖像映射過程（第 1 個 4 個區域標簽）。

print"<DIV STYLE='POSITION:absolute;LEFT:$rpos;'><IMG SRC='$filex' WIDTH='600' HEIGHT='265' USEMAP='#cmap' STYLE='POSITION:absolute;LEFT:$rpos;' CLASS='mapper $cmabrdr iopacity$colrmapcolr9 icolor$colrmapcolr8'></DIV>\n";
  print"<MAP NAME='cmap'>\n";

  if (!$simflg) {        
    print"<AREA shape='circle' CLASS='$cmabrdr iopacity$colrmapcolr9 icolor$colrmapcolr1' ID='q1' rel='$rels[3]' TITLE='quartile 1' HREF='#' coords='555,50,8'>
          <AREA shape='circle' CLASS='$cmabrdr iopacity$colrmapcolr9 icolor$colrmapcolr2' ID='q2' rel='$rels[2]' TITLE='quartile 2' HREF='#' coords='565,70,8'>
          <AREA shape='circle' CLASS='$cmabrdr iopacity$colrmapcolr9 icolor$colrmapcolr3' ID='q3' rel='$rels[1]' TITLE='quartile 3' HREF='#' coords='575,90,8'>
          <AREA shape='circle' CLASS='$cmabrdr iopacity$colrmapcolr9 icolor$colrmapcolr4' ID='q4' rel='$rels[0]' TITLE='quartile 4' HREF='#' coords='585,110,8'>
          \n";
  }  
  
  $gstr = '';
  foreach $key ( @counties ) {

    $keylc = lc($key);
    $surtok = 'x' . $keylc;
    $surtok =~ s/ +//g;
    $uckey = $key;
    $uckey =~ s/\b(\w)(\w*)/uc($1).lc($2)/ge; # Uppercase 1st word letters.   

    if (!$simflg) {
      if (defined $cdvals{$keylc}) { 
        print"<AREA ID='$key' HREF='$curls{$keylc}' SHAPE='POLY' COORDS='$ccoords{$keylc}' TITLE='$keystr{$keylc} -\r\nClick For The $uckey $blev $dcname Trend' ONMOUSEOVER=\"showIt('$surtok');setStatus(' ');\" ONMOUSEOUT=\"hideIt('$surtok');setStatus(' ');\">\n";   
      } else {
          print"<AREA ID='$key' SHAPE='POLY' COORDS='$ccoords{$keylc}' TITLE='$keystr{$keylc}' ONMOUSEOVER=\"setStatus(' ');\" ONMOUSEOUT=\"setStatus(' ');\">\n";
        }
    } else {
        print"<AREA ID='$key' SHAPE='POLY' COORDS='$ccoords{$keylc}' TITLE='$keystr{$keylc}' ONMOUSEOVER=\"setStatus(' ');\" ONMOUSEOUT=\"setStatus(' ');\">\n";   
      }
    
    if (!$simflg && defined $cdvals{$keylc}) {    
      $j = allSame(1, $vlus{$surtok});        
      $k = allSame(2, $rts{$surtok});         
      
      if (exists($vlus{$surtok})) {
        $gstr .= "<DIV ID='$surtok'><A ONMOUSEOVER=\"setStatus('Value and Rate Trends');\" ONMOUSEOUT=\"setStatus('  ');\"><SPAN ID='slhdr$surtok' STYLE='POSITION:absolute;TOP:28.5%;LEFT:$lpos;FONT-SIZE:9px;BACKGROUND-COLOR:#$ltappbgcolr;FONT-FAMILY:arial;'>$uckey v/r Trends<BR></SPAN><SPAN ID='slx$surtok' STYLE='POSITION:absolute;TOP:$tpos;LEFT:$lpos;BACKGROUND-COLOR:#$ltappbgcolr;BORDER:1px dashed lightgray;PADDING-TOP:$tpads;'>&nbsp;<SPAN CLASS='inlinesparkline$j' TITLE='Value Trend' ONMOUSEOVER=\"setStatus('Value Trend');\" ONMOUSEOUT=\"setStatus(' ');\">$vlus{$surtok}</SPAN>&nbsp;&nbsp;<SPAN CLASS='inlinesparkline$k' TITLE='Rate Trend' ONMOUSEOVER=\"setStatus('Rate Trend');\" ONMOUSEOUT=\"setStatus(' ');\">$rts{$surtok}</SPAN>&nbsp;</SPAN></A></DIV><SCRIPT>hideIt('$surtok');</SCRIPT>";              
      }
    }     

  } 

  print"</MAP>\n";

正如我上面所說，我已經驗證了 rels 數組的內容在來自所有 4 個模塊中的內聯代碼塊和子例程的數組被使用的區域標記處是相同的。 區域集的突出顯示在所有 4 個模塊中都使用 inline 塊。 我將內聯塊放入子例程中，並使用指針/引用將數組從例程中傳遞出來，並且區域集的突出顯示在 4 個模塊中的 3 個模塊中不再起作用。

以下是在我家的服務器上運行的鏈接。 它是與子程序中的代碼一起工作的第 1 個模塊。 您可以通過將鼠標懸停在顏色圖右側的 4 個圓圈中的任何一個上來查看突出顯示的區域集。

帶有突出顯示工作的子例程的顏色圖示例

所有數據僅用於測試目的。

更新：我很沮喪。 我已經嘗試了很多東西，但一直無法在這方面移動球。 我已經比較了當 rels 數組來自外部子例程時區域集突出顯示工作的模塊與不在該配置中的 3 個模塊。 我已經查看了 3 個模塊，其中區域集突出顯示在 rels 數組從外部子例程中出來時退出工作，並在子例程內聯時工作。 我列出了我所知道的以下內容。

  1. 盡管所有 4 個模塊在許多方面都相似，但仍存在顯着差異。 但我認為這些差異中的任何一個都不會影響此行為不起作用的 3 個模塊中突出顯示的區域集。

  2. 不起作用的 3 個模塊可能有 10 個其他子例程傳遞標量。 數組，並散列輸入和輸出該工作。

  3. 對於區域設置突出顯示的 3 個模塊，當 rels 數組來自外部子例程時退出工作並在子例程內聯時工作，兩種配置中所有三個模塊的 rels 數組內容相同。

  4. rels 數組在它從子程序（或內聯代碼）出現的位置和圖像映射的第 1 4 個區域標記集中的位置之間沒有接觸。

  5. 區域圖圖像和區域html在子程序配置的所有4個模塊中完全相同，除了圖像地圖的名稱，用戶懸停查看區域設置高亮的圓坐標，以及rels數組元素中的區域對應於彩色四分位數。

  6. 將區域集突出顯示的懸停在鏈接（圓圈）上是子程序配置中所有 3 個模塊中的所有活動鏈接，但是當我鼠標懸停時，區域集沒有突出顯示。

  7. 各個區域的懸停行為在子程序配置中的所有 3 個模塊中繼續有效。

我想弄清楚這一點。 我想我可以說至少它可以在內聯配置中工作，但這不是它應該工作的方式。 我沒有看到它，但我仍在尋找。 對此的任何建議將不勝感激。

謝謝你的時間。 克雷格

1 個解決方案

解決方案1
 0  2020-12-15 19:05:58

我有一些其他優先事項讓我暫時遠離這個問題，有一些工作到位。 我認為問題在 5 中一定是不正確的，其中突出顯示的區域集不起作用，並且在 1 中一定沒有問題。 這里的問題是散列鍵不匹配。 我在這個問題所涉及的六個模塊中的每個模塊中都有 9 個哈希值。 1 個模塊中的所有鍵都與哈希匹配，其中突出顯示的區域集起作用。 其他 5 個模塊有 1 個具有不匹配鍵的散列。 我花了一段時間才看到它，我的問題描述反映了我缺乏理解。 現在所有 6 個模塊都正常工作。 感謝所有看到這個的人。 此問題已關閉。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 javascript：突出顯示圖像區域/部分 突出顯示圖像地圖上的區域 html 圖像 map 停止在 iOS Safari 上工作 為什么當我開始使用localStorage時代碼停止工作？ 刪除“alert（）”時，我的代碼停止工作 CKEditor內聯代碼片段突出顯示 HTML：圖像地圖區域的響應能力 Javascript function 在添加圖像時停止工作 在 javascript (jQuery) 中單擊圖像 map 區域時刪除關聯圖像 Javascript 添加超時后代碼停止工作
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM