Question

我有一个问题，如何在点击其中一个链接时查看我想要的数据。如何获取动态ID来触发数据。

下面是我的图片，当我点击元数据部分的<td><a href="">Shay, Lynn. 2015. Tropical Cyclone Issac Ocean Profiles from 16 August 2012. Deepsea to Coast Connectivity in the Eastern Gulf of Mexico (DEEP-C). </a></td>时，它将在详细信息部分动态显示详细信息。

这是我的代码：

<div class="panel-body">
            <p align="justify"><strong>Dataset Title:</strong> Tropical Cyclone Issac Ocean Profiles from 16 August 2012</p>
            <p align="justify"><strong>File Identifier:</strong> R1.x138.077:0015</p>
            <p align="justify"><strong>Dataset Originator:</strong> Shay, Lynn</p>
            <p align="justify"><strong>Point of Contact:</strong> Shay, Lynn (nshay@rsmas.miami.edu) </p>
            <p align="justify"><strong>Abstract:</strong> <br />A flight on NOAA's WP-3D Orion aircraft was conducted during tropical cyclone Isaac on 16 August 2012 over the northeastern Gulf of Mexico (from approximately 24 to 29 N and 84 to 90 W), over the Loop Current (LC) and associated frontal eddies. Airborne expendable probes measured atmospheric and oceanic parameters.</p>
            <br />
            <a class="btn btn-success btn-xs" href="metaservice#">Metaservice</a>
        </div>

以下是我的详细信息部分代码

public class UniversalWebViewFragment extends Fragment {

    private static final String GOOGLE_SERACH_URL = "https://www.google.com/search?q=";

    private static final String YOUTUBE_SERACH_URL = "https://www.youtube.com/results?search_query=android";

    private WebView webView;
    private FrameLayout customViewContainer;
    private WebChromeClient.CustomViewCallback customViewCallback;
    private View mCustomView;
    private myWebChromeClient mWebChromeClient;
    private myWebViewClient mWebViewClient;

    public static UniversalWebViewFragment newInstance() {

        return new UniversalWebViewFragment();
    }

    public void searchOnGoogle(String key) {
        webView.loadUrl(GOOGLE_SERACH_URL + key);
    }

    public void searchOnYoutube(String key) {
        webView.loadUrl(YOUTUBE_SERACH_URL + key);
    }

    /**
     * Called when the activity is first created.
     */

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.universal_web_view,
                container, false);

        customViewContainer = (FrameLayout) rootView
                .findViewById(R.id.customViewContainer);
        webView = (WebView) rootView.findViewById(R.id.webView);

        mWebViewClient = new myWebViewClient();
        webView.setWebViewClient(mWebViewClient);

        mWebChromeClient = new myWebChromeClient();
        webView.setWebChromeClient(mWebChromeClient);
        webView.getSettings().setJavaScriptEnabled(true);

        // Important for PayUMoney
        webView.getSettings().setDomStorageEnabled(true);

        webView.getSettings().setAppCacheEnabled(true);
        webView.getSettings().setBuiltInZoomControls(true);
        webView.getSettings().setSaveFormData(true);
        webView.loadUrl(GOOGLE_SERACH_URL);
        // webView.requestFocus();

        // Handle Back keyPress
        rootView.setFocusableInTouchMode(true);
        rootView.requestFocus();
        rootView.setOnKeyListener(new OnKeyListener() {

            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {

                if (keyCode == KeyEvent.KEYCODE_BACK) {

                    return true;

                }
                // return super.onKeyDown(keyCode, event);
                return true;
            }
        });

        return rootView;
    }

    public boolean inCustomView() {
        return (mCustomView != null);
    }

    public void hideCustomView() {
        mWebChromeClient.onHideCustomView();
    }

    @Override
    public void onPause() {
        super.onPause(); // To change body of overridden methods use File |
                            // Settings | File Templates.
        webView.onPause();
    }

    @Override
    public void onResume() {
        super.onResume(); // To change body of overridden methods use File |
                            // Settings | File Templates.
        webView.onResume();
    }

    @Override
    public void onStop() {
        super.onStop(); // To change body of overridden methods use File |
                        // Settings | File Templates.
        if (inCustomView()) {
            hideCustomView();
        }
    }

    class myWebChromeClient extends WebChromeClient {
        private View mVideoProgressView;

        @Override
        public void onShowCustomView(View view, int requestedOrientation,
                CustomViewCallback callback) {
            onShowCustomView(view, callback); // To change body of overridden
                                                // methods use File | Settings |
                                                // File Templates.
        }

        @Override
        public void onShowCustomView(View view, CustomViewCallback callback) {

            // if a view already exists then immediately terminate the new one
            if (mCustomView != null) {
                callback.onCustomViewHidden();
                return;
            }
            mCustomView = view;
            webView.setVisibility(View.GONE);
            customViewContainer.setVisibility(View.VISIBLE);
            customViewContainer.addView(view);
            customViewCallback = callback;
        }

        @Override
        public View getVideoLoadingProgressView() {

            if (mVideoProgressView == null) {
                LayoutInflater inflater = LayoutInflater.from(getActivity());
                mVideoProgressView = inflater.inflate(R.layout.video_progress,
                        null);
            }
            return mVideoProgressView;
        }

        @Override
        public void onHideCustomView() {
            super.onHideCustomView(); // To change body of overridden methods
                                        // use File | Settings | File Templates.
            if (mCustomView == null)
                return;

            webView.setVisibility(View.VISIBLE);
            customViewContainer.setVisibility(View.GONE);

            // Hide the custom view.
            mCustomView.setVisibility(View.GONE);

            // Remove the custom view from its container.
            customViewContainer.removeView(mCustomView);
            customViewCallback.onCustomViewHidden();

            mCustomView = null;
        }
    }

    class myWebViewClient extends WebViewClient {

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return super.shouldOverrideUrlLoading(view, url);
        }

        private int webViewPreviousState;

        private final int PAGE_STARTED = 0x1;

        private final int PAGE_REDIRECTED = 0x2;

        Dialog dialog = new Dialog(getActivity());

        /*
         * (non-Javadoc)
         * 
         * /* (non-Javadoc)
         * 
         * @see
         * android.webkit.WebViewClient#onPageStarted(android.webkit.WebView,
         * java.lang.String, android.graphics.Bitmap)
         */
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            webViewPreviousState = PAGE_STARTED;

            if (dialog == null || !dialog.isShowing())
                dialog = ProgressDialog.show(getActivity(), "",
                        "Loading Please Wait", true, true,
                        new OnCancelListener() {

                            @Override
                            public void onCancel(DialogInterface dialog) {
                                // do something
                            }
                        });
        }

        @Override
        public void onPageFinished(WebView view, String url) {

            if (webViewPreviousState == PAGE_STARTED) {
                if (null != dialog)
                    dialog.dismiss();
                dialog = null;
            }

        }
    }

}

我该怎么做？先谢谢

Answer 1

要仅使用javascript和html解决此问题，您需要将所有信息打印到页面，并在需要时显示/隐藏相关详细信息。

我的html每个细节都有一个.panel-body div。请注意，它们每个都有唯一的ID。这些在css中默认隐藏。我还给了元数据中的每个链接（您可能想要更好地设置样式）一个独特的data-id属性（1＆amp; 2），我还给了它们metalink的类所以我可以在javascript中轻松地引用它们。我已经将细节面板向下切了一些，以便于阅读。

我的javascript获取所有metalink并通过在for循环中运行它们来将点击处理程序绑定到每个。然后转到showDetail（id）方法，该方法隐藏所有细节面板，然后显示具有我们从click事件传递的id的那个。通过检查每次迭代中的每个div以确定是否显示它，可能有一种更优雅的方法，但这也有效。

我已经添加了JSFiddle来查看此动作，其中包括一些快速＆amp;肮脏的造型。

HTML：

  <div id="metadata">
    <h1>Metadata</h1>
    <table>
      <tr>
        <th>Metadata</th>
        <th>Download</th>
      </tr>
      <tr>
        <td><a href="#" class="metalink" data-id="1">11111111111111111</a></td>
        <td>Download</td>
      </tr>
      <tr>
        <td><a href="#" class="metalink" data-id="2">22222222222222222</a></td>
        <td>Download</td>
      </tr>
    </table>
  </div>

  <div id="detail">
    <h1>Detail</h1>

    <div id="panel-1" class="panel-body">
      <p align="justify">Details for 111111111</p>
    </div>

    <div id="panel-2" class="panel-body">
      <p align="justify">Details for 22222222</p>
    </div>
  </div>

JS：

var metalinks = document.getElementsByClassName("metalink");
  for (var i=0; i < metalinks.length; i++) {
    metalinks[i].onclick = function(e){
      e.preventDefault();
      showDetail(this.dataset.id);
    };
}

function showDetail(id)
{
  var detailsPanels = document.getElementsByClassName("panel-body");
  for (var j=0; j < detailsPanels.length; j++) {
    detailsPanels[j].style.display = "none";
  }
  var detailPanel = document.getElementById("panel-" + id);
  detailPanel.style.display = "block";
}

单击使用Javascript在页面的另一部分中链接和查看

1 个答案: